▊ 属性选择器
根据属性进行选择。
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