类选择器

/* 选中类名为 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-child 的区别是，: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 上的说明。