CSS选择器
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元素之后声称某些内容 |