▊ 属性选择器
根据属性进行选择。
E[attr] |
选择具有arrt属性的E元素 |
E[attr="val"] |
选择具有arrt属性且属性值等于val的E元素 |
E[attr^="val"] |
选择具有arrt属性、且属性值以val开头的E元素 |
E[attr$="val"] |
选择具有arrt属性、且属性值以val结尾的E元素 |
E[attr*="val"] |
选择具有arrt属性、且属性值含有val的E元素 |
注：
- 本质类似于交集选择器
- 类选择器、伪类选择器、属性选择器，权重为10
▊ 结构伪类选择器
:first-child |
匹配父元素的第一个子元素 |
:last-child |
匹配父元素的最后一个子元素 |
:nth-child(n) |
匹配父元素的第n个子元素 |
:first-of-type |
指定类型的第一个 |
:last-of-type |
指定类型的最后一个 |
:nth-of-type(n) |
指定类型的第n个 |
注：
- 对于nth…(n)中的n，不仅可以是数字，可以是关键词（
even偶数，odd奇数（隔行变色时非常常见！）） - ↑ 是式子时更加巧妙：
li:nth-child(2n)等价于li:nth-child(even)；li:nth-child(-n+5)就是选出前5个；li:nth-child(n+5)就是选出从第5个开始往后选；（n从0开始取） - 注意下标从1开始
:nth-child(n)是选择父元素的孩子，而不管孩子的类型- 结构伪类选择器也是伪类选择器，权重为10
▊ 伪元素选择器
::before |
在元素内部的前面插入内容 |
::after |
在元素内部的后面插入内容 |
注：
- before和after必须有content属性
- before和after创建一个元素（盒子），属于行内元素
- 因为在dom中看不见刚才创建的元素，不是真正意义上的元素（盒子），因此称为伪元素
- 双冒号前面写的是父级元素，before的含义是在该父级元素的子级元素前面加一个内容（行内元素）
- 通常用来省去父级盒子内部的一个没有语义的span盒子，结构性更好
- 权重为1
▊ 使用场景
<body>
<!-- 属性选择器使用场景 -->
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<!-- :nth-child结构伪类选择器使用场景 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- :nth-of-type(n)结构伪类选择器使用场景 -->
<div>
<p></p>
<span></span>
<span></span>
<span></span>
</div>
</body>
button[disabled] {
cursor: default;
}
.ul li:nth-child(3n) {
background: pink;
}
div span:nth-of-type(even) {
background: pink;3
}
☀ 注
文章案例改编自《黑马程序员-web前端》
&Lolisaikou