分享

CSS3中的ul,li{}; ul li{}; ul>li{}这三个有什么区别?

 shawnesc 2019-02-22

ul,li{}:设置所有ul和li元素的样式

 <style>
    ul,li{color:red}
</style>
<ul><li>红色</li></ul>
<ol><li>红色</li></ol>

ul li{}:只设置ul下的li元素

 <style>
    ul li{color:red}
</style>
<ul><li>红色</li></ul>
<ol><li>浏览器默认颜色,黑色,而不是红色</li></ol>

ul>li{}:设置ul标签下的直接li元素,这个样式没多大意义,因为ul的合法子元素是li,应该用其他元素来举例好点,不过你硬要插入不合法元素也可以,如下面的

 <style>
    ul>li{color:red}
</style>
<ul>
    <li>红色</li>
    <div>
        <li>黑色</li>
    </div>
</ul>

直接子元素示例你可以看这个多明显

 <style>
    div>b{color:red}
</style>
<div>
    <b>红色</b>
    <span><b>黑色</b></span>
</div>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多