前端

伪类选择器

种类最多最复杂的选择器。

动态伪类

:link表示未被访问的状态。
:visited表示已被访问过。
:hover表示鼠标悬浮在该元素上。
:active表示元素激活状态。
:focus表示获取焦点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a:link {
  color: orange;
}
a:visited {
  color: red;
}
a:hover {
  color: green;
}
a:active {
  color: pink;
}
input:focus {
  color: orange;
  background-color: green;
}

结构伪类

常用结构伪类：
:first-child：所有兄弟元素的第一个。
:last-child：所有兄弟元素的最后一个。
:nth-child(n)：所有兄弟元素的第n个。
:first-of-type：所有同类型兄弟元素的第一个。
:last-of-type：所有同类型兄弟元素的最后一个。
:nth-of-type(n)：所有同类型兄弟元素的第n个。

注意：
所有的元素是从上到下的顺序，从1开始计数，不是从0开始。
n的值从0~正无穷，但是一般大于某个数以后就不起作用了。n的写法标准格式是an+b,表示一个数列，数列中的数就是被选中的元素的编号。

还有一些可能不常用的结构伪类：
:nth-last-child(n)：所有兄弟元素中倒数第n个。
:nth-last-of-type(n)：所有同类型兄弟元素中的倒数第n个。
:only-child：没有兄弟的元素。
:only-of-type：没有同类型的兄弟元素。
:root：根元素，整个html。
:empty：内容为空的元素，包含空格。

否定伪类

剔除满足给定条件的元素。

1
2
3
4
/*选择div的后代中，不是p标签的元素。*/
div :not(p){
  background-color: green;
}

UI伪类

常用：
:checked：被选中的复选框或单选按钮。
:enabled：可用的表单元素。
:disable：不可用的表单元素。

1
2
3
4
5
input:checked {
  width: 20px;
  height: 20px;
}
input

伪元素选择器

选中指定元素中特殊位置。
常用：
::first-letter：选中元素的第一个文字。
::first-line：选中元素的第一行文字。
::selection：选中被鼠标选中的元素。
::placehoder：选中输入框的提示文字。

1
2
3
p::first-letter{
  background-color: green;
}

选择器的权重

简单排序

行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配选择器。

或者

(a,b,c)比较权重

计算(a,b,c)，其中：
a:id选择器的个数。
b:类、伪类、属性选择器的个数。
c:元素、伪元素的选择器个数。

然后像字典序一样比较，(a,b,c)值较大的权重更高。

特殊规则

!important的权重最高。

1
2
3
4
p {
  color: red;!important
  font-size: 20px;
}

注意，!important只作用于标注的那一个修改属性，对其他的没用，并且不可轻易使用。