`元素的样式。
#### 顺序问题
在某些浏览器中，如果你定义了一个`:visited`样式，它可能会被后面定义的`:link`样式覆盖，所以建议按照如下顺序定义伪类样式。
```css
a:link {}
a:visited {}
a:hover {}
a:active {}
```
## 三.表单状态
### `:disabled`和`:enabled`
`:disabled`和`:enabled`用于设置表单元素（例如button）是否禁用时的样式，表单元素默认是enabled，所以我们一般很少用`:enabled`设置元素的样式。
### `:checked` and `:indeterminate`
`:checked`用于指示某些可以被用户点击选中的表单元素，例如checkbox和radioButton。
checkbox元素除了拥有选中和被选中两种状态，还有一种状态为`indeterminate`，需要通过js激活该状态：
```javascript
inputCheckbox.indeterminate = true;
```
可以使用`:indeterminate`设置该状态下的样式。
### `:placeholder-shown`
如果某个表单元素设置了`placeholder`属性，那么当`placeholder`显示的时候，可以用`:placeholder-shown`设置该状态下的样式。
### 验证状态
正如文章开始的例子那样，可以使用`:valid`、`:invalid`和`in-range`根据表单元素的验证状态，动态的更改样式。
`:in-range`主要是针对，设置了`min`和`max`属性的``元素。例如``，使用下面的css代码，当用户输入数字范围不在1~5范围间时，输入框背景色为红色。
```css
input {
background: red;
}
input:in-range {
background: white;
}
```
## 四.根据元素的索引、出现顺序选中元素
### `:first-child`和`:last-child`
`:first-child`和`:last-child`用于选中一组元素内同级的第一个和最后一个元素。
### `only-child`
`only-child`用于选中没有兄弟元素的元素。
### `:first-of-type`和`:last-of-type`
`:first-of-type`和`:last-of-type`与`:first-child`和`:last-child`类似，也是选中第一个和最后一个元素，但是范围不一样，它不限于元素在一个组内，不要求元素是兄弟节点。
### `nth-child`和`nth-of-type`
`nth-child`和`nth-of-type`是前面内容的扩充，用于选中第n个元素。
你还可以使用`nth-child(even)`选中所有奇数位元素。
甚至更复杂的形式，选中3n+3位置的元素。
```css
li:nth-child(3n+3) {
background: yellow;
}
```
### `only-of-type`
`only-of-type`与`only-child`元素类似，区别是`only-child`选中的是一组内唯一子元素，而`only-of-type`选中的是一组内唯一类型的子元素。
## 五.寻找空元素
### `:empty`
当某个元素没有子元素时，我们认为它是一个空元素。可以使用`:empty`设置空元素的样式。
注意空元素，标签内部没有空格。
```html
```
第二个``元素不是一个空元素，所以`:empty`对其无效果。
## 六.选择和过滤
### `:is() `
如果你想要指示类名为`.post`元素下`h2`、`li`子元素，可以这样写:
```css
.post :is(h2, li) {
}
```
等价的写法：
```css
.post h2,.post li {
}
```
### `:not()`
可以使用`:not()`排除某些元素。例如选中所有没有类名（`class`属性）的链接。
```css
a:not([class]) {
}
```
选中所有没有`alt`属性的图片。
```css
img:not([alt]) {
}
```
（完）