CSS之选择器

常用独立选择器

元素，ID，类

通配选择器

在CSS中,一个星号()就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,.warning 和.warning 的效果完全相同.

在CSS3中,星号(*)可以和命名空间组合使用:

ns|* - 会匹配ns命名空间下的所有元素
| - 会匹配所有命名空间下的所有元素
|* - 会匹配所有没有命名空间的元素

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

/* 存在title属性的 元素, 如下选择 */
a[title] {
color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的 元素, 如下选择 */
a[href=“https://example.org”] {
color: green;
}

关系选择器

相邻兄弟选择器 (+)

介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

/* 图片后面紧跟着的段落将被选中 */
img + p {
font-style: bold;
}

兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。
p ~ span {
color: red;
}

子选择器

当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

后代选择器

当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.

伪类

active

:active CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配 tab 键交互。通常用于但并不限于 和 HTML元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active 的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。

checked

:checked CSS 伪类选择器表示任何处于选中状态的radio(), checkbox () 或(“select”) 元素中的option HTML元素(“option”)。

/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
:checked {
margin-left: 25px;
border: 1px solid blue;
}
用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。

first-child

:first-child CSS pseudo-class 表示在一组兄弟元素中的第一个元素。

/* Selects any

that is the first element
among its siblings */
p:first-child {
color: lime;
}

first-of-type

:first-of-type表示一组兄弟元素中其类型的第一个元素。

/* 选择在父元素中第一个出现的

，而不管其在兄弟内的位置如何 */
p:first-of-type {
color: red;
}

否定伪类

CSS 否定CSS 伪类 :not() 匹配不符合一组选择器的元素，它有时也被称为反选伪类（negation pseudo-class）。不能包含另外一个否定选择器。

/* Selects any element that is NOT a paragraph */
:not§ {
color: blue;
}

in-range

in-range CSS 伪类 代表一个 元素，其当前值处于属性min 和max 限定的范围之内.
/* 该伪类可选定任意的, 但只有在该元素指定了取值范围，并且元素值处于指定范围时才有效*/
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
该伪类用于给用户一个可视化的提示，表示输入域的当前值处于允许范围内。

nth-child(an+b)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。示例：

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13…的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。