CSS3 E:nth-child、E>F、E~F、E+F以及属性选择器

仅供学习,转载请注明出处

CSS3新增选择器

1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->

2、E:first-child:匹配元素类型为E且是父元素的第一个子元素 3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素 4、E > F E元素下面第一层子集 5、E ~ F E元素后面的兄弟元素 6、E + F 紧挨着的后面的兄弟元素

看完了上面的示例代码,可能有些似懂非懂,下面来编写一些示例来看看。

E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

可以看到,我主要写了5个div,但是如果我想要给每个div分配设置不同的样式,按照以前的做法就是给每个div进行类名定义。这样感觉写html部分是比较麻烦。

现在有了这个新选择器,就可以这样做,如下:

E:first-child:匹配元素类型为E且是父元素的第一个子元素 E:last-child:匹配元素类型为E且是父元素的最后一个子元素

除了上面根据序号来定位相关元素的样式,还可以使用first-childlast-child来进行定位。

E > F E元素下面第一层子集

E ~ F E元素后面的兄弟元素

E + F 紧挨着的后面的兄弟元素

可以看到第一个div没被设置蓝色,后面的div都被设置为了蓝色。


属性选择器:

1、E[attr] 含有attr属性的元素 2、E[attr='ok'] 含有attr属性的元素且它的值为“ok”

3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”

4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”

5、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券