[HTML5 + CSS3]css3主要选择器

浏览数：28 / 时间：2015年06月09日

css3选择器为我们带来了很多便利，以前只能用JS或特定元素增加特定CLASS实现效果，下面用实例记录/分享下每个css3选择器的作用。

（1）毗邻元素选择器 x + y

<!-- css -->
<style type="text/css">
    div ul + p { background:#F00; }
</style>

<!-- 标签 -->
<div>
    <ul>我是ul</ul>
    <p>我是p</p>
    <ol>我是ol</ol>
    <p>我是p</p>
</div>

浏览器效果：

技术分享

总结：只选择紧跟UL其后的P标签，其它P标签不选择。

 

（2）子元素选择器 x > y

<!-- css -->
<style type="text/css">
    ul { background:#000;color:#FFF;}
    div > ul { background:#F00;}
</style>

<!-- 标签 -->
<div>
    <ul>
        <li>
            我是UlLI
            <ul>
                我是二级ul
            </ul>
        </li>
    </ul>
</div>

浏览器效果：

技术分享

总结：为了更好的说明问题，一开始我便给所有UL定义了背景黑色。实际显示效果是第一个UL背景红色，因为我们在css样式中覆盖了开始写的黑色，> 选择器只会选择直接子元素，不会选择子辈以后的元素。

 

（3）同级元素选择器 x ~ y

 

<!-- css -->
<style type="text/css">
    ul ~ ol { background:#F00;}
</style>

<!-- 标签 -->
<div>
    <ul>我是UL</ul>
    <ol>我是OL</ol>
    <p>我是P</p>
    <ul>
        <li>
            <ol>我是二级OL</ol>
        </li>
    </ul>
    <ol>我还是OL</ol>
</div>

浏览器效果:

技术分享

总结：共有3个Ol，2个为UL的同级元素，实例显示同级OL元素背景为红色，可见~选择器的的作用：只选择同级指定元素。

 

未完同，待更新。。。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com log src http html 问题 it class style com log src http html 问题 it

相关文章

随机文章

您可能还喜欢

您可能还喜欢