· 329 words · 2 min
/* 选中类名为 a 元素下面类名为 b 的元素 */
.a .b {
color: red;
}
/* 选中类名同时包含 a 和 b 的元素 */
.a.b {
color: red;
}
[attr]
:选中具有属性名 attr 的元素。[att=val]
:选中属性名为 attr,并且属性值为 val 的元素。[att~=val]
:选中属性名为 attr,属性值为 val 的元素。这里的 val 可以为若干个用空格分隔的属性值。[att|=val]
:选中属性名为 attr,属性值以 val 开头的元素。属性值中若有特殊字符,可以用单/双引号括起来。
:root
:表示树的根元素。例如声明全局 CSS 变量时:
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty
:没有子节点的元素,比如 <div></div>
。
:nth-child
和 :nth-last-chil
d 的区别是,:nth-last-child
是从后往前倒着开始。
:nth-child(even)
:选中偶数节点,奇数为 odd。:nth-child(2n-1)
:选中第 1、3、5 等符合数学公式 2n-1 的节点(n 为正整数)。:nth-child(3n-1 of li.important)
:选中第 2、5、8 等符合数学公式 3n-1 且具有 important 类名的 li
标签。:first-child
、:last-child
:第一个、最后一个子元素。
of-type
系列,是一个变形的语法糖。S:nth-of-type(An+B)
是 :nth-child(|An+B| of S)
的另一种写法。
关于其他更多的伪类选择器,可以查看 MDN 上的说明。