其他分享
首页 > 其他分享> > 【前端学习笔记day39】6.2. CSS3新增选择器

【前端学习笔记day39】6.2. CSS3新增选择器

作者:互联网

文章目录

6.2. CSS3新增选择器

在这里插入图片描述

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 紧挨着的后面的兄弟元素

属性选择器:
1、E[attr] 含有attr属性的元素

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

2、E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
3、E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”

汪雯琦 发布了312 篇原创文章 · 获赞 145 · 访问量 1万+ 私信 关注

标签:CSS3,ok,attr,day39,含有,元素,选择器
来源: https://blog.csdn.net/qq_35456045/article/details/104116915