CSS 选择器用法收集整理, 参考官方文档
| 选择器 | 说明 |
|---|---|
* |
用于所有元素, 少用, 很慢 |
.X |
class选择器, class="X" |
#X |
id选择器, id="X" |
X |
标签选择器, 用语渲染html标签 |
XY组合选择器, 会有下面这几种:
| 选择器 | 说明 |
|---|---|
X.Y |
class="Y"的元素 |
X#Y |
id="Y"的元素 |
#X.Y |
id="X" class="Y"的元素 |
.X#Y |
class="X" id="Y"的元素, 跟上面一样 |
X, Y, Z批量选择器, 即多个选择器用 , 隔开，中间有无空格都可以，表示适用于每个被隔开的选择器
X Y后代选择器(中间用空格隔开), 选取 X 元素内的所有 Y 元素
X > Y子元素选择器(直接后代选择器), 选取 X 元素内的所有 直接出现 的Y 元素
相当于所有第一代子元素，而第二代子元素不会选中
X + Y临近选择器, 选取紧邻着 X 元素后面出现的第一个 Y 元素
X和Y必须是同级且中间不隔着其他元素，否则不会选中
X ~ Y也是临近选择器, 选取 X 元素后面出现的所有与X同级的 Y 元素
| 选择器 | 说明 |
|---|---|
X[foo] |
选取具有属性foo的X元素 |
X[foo="bar"] |
选取具有属性foo且属性值为bar的X元素 |
X[foo*="bar"] |
X元素的’foo’属性值中包含子串’bar’即可 |
X[foo^="bar"] |
X元素的’foo’属性值必须以bar开头 |
X[foo$="bar"] |
X元素的’foo’属性值必须以bar结尾 |
X[foo~="bar"] |
X元素的有个’foo’属性, 属性值是空白隔开的值列表, 值列表中有一个是bar即可 |
| 选择器 | 示例 | 说明 |
|---|---|---|
X:link |
a:link |
未点击过的链接 |
X:visited |
a:visited |
已访问过的链接 |
X:active |
button:active |
获取到用户焦点时 |
X:hover |
div:hover |
鼠标移到元素上面时 |
X:checked |
input[type=radio]:checked |
被选中的元素单选框、复选框等 |
X:not(Y) |
div:not(#container) |
除 #contaienr 外的所有 div 元素 |
| 选择器 | 说明 |
|---|---|
X:nth-child(n) |
X元素且是父元素的第n个子元素 |
X:nth-last-child(n) |
X元素且是父元素的倒数第n个子元素 |
X:nth-of-type(n) |
第n个兄弟X元素 |
X:nth-last-of-type(n) |
倒数第n个兄弟X元素 |
X:first-child |
X元素且是父元素的第1个子元素 |
X:last-child |
X元素且是父元素的倒数第1个子元素 |
X:first-of-type |
X兄弟元素中的第1个 |
X:last-of-type |
X兄弟元素中的倒数第1个 |
X:only-child |
X元素且是父元素的唯一一个子元素 |
X:only-of-type |
X兄弟元素中的唯一一个(即同级别中就一个X) |
最常用的方式是这样的:
tbody tr:nth-of-type(odd) /* 奇数行 */
tbody tr:nth-of-type(even) /* 偶数行 */
只对块级元素生效
| 选择器 | 示例 | 说明 |
|---|---|---|
X::first-line |
p::first-line |
第一行 |
X::first-letter |
p::first-letter |
第一个字母 |
X::before |
在X元素之前声称某些内容 |
|
X::after |
在X元素之后声称某些内容 |