伪类选择器与伪元素

动态伪类：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。 锚点伪类： :link 默认样式，最原始的样子 :visited 元素点击过后的样式 用户行为伪类 :hover 鼠标悬停在元素上的状态 :active 点击时的状态 :focus input标签光标聚焦的状态 使用例子： 鼠标悬停在a标签上 背景颜色变红 a:hover{ background:#fff; }

UI元素状态伪类 :enabled input标签可编辑状态 :disabled input标签不可编辑状态 :checked 单选框或复选框默认选中状态 使用例子： 输入框在可编辑状态 背景颜色变红 input:enabled{ background:#fff; }

结构类： nth选择器 1,Element:first-child 选择属于其父元素的首个子元素如果是element就生效。 举例：

这个时候就不会生效 因为div的父元素body的第一个元素是header 而不是div

2,Element:nth-child(N) 选择器匹配属于其父元素的第N个子元素，不论元素类型

3,Element:nth-child(n) 如果括号填了n 就代表父元素下该元素的全部子元素 Element:nth-child(odd) 代表奇数，也可以写成表达式Element:nth-child(2n+1) Element:nth-child(even) 代表偶数，也可以写成表达式Element:nth-child(2n)

4,Element:nth-last-child(N) 匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数 举例：

由于section是其父元素最后一个section元素，所以该样式生效，如果最后一个是div元素，则不生效

5,Element:nth-of-type(N) 选择器匹配属于父元素的特点类型的第N个子元素的每个元素 举例

下面三个section的样式都会生效，因为指定了第二个div的全部子元素

6,Element:nth-last-of-type(N) 匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

7,Element:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素

8,Element:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素

9,Element:only-child 选择器匹配属于其父元素唯一子元素的每个元素（该元素的父元素只有当前一个自身元素） 举例

因为body里面除了article元素 还有其他元素 所以样式不会生效

10,Element:only-of-type 选择器匹配属于其父元素特定类型的唯一子元素的每个元素 举例：

因为body只有一个article元素 所以样式生效

11,Element:empty 选择器匹配没有子元素并且没有文本的元素

12,否定选择器（:not） 选择器匹配非指定元素 举例

除了最后一个div 其他都加上红色背景

伪元素 1,Element::first-line 对元素的第一行文本进行格式化 first-line伪元素只能用于块级元素

2,Element::first-letter 对文本首字母设置样式

3,Element::before 对元素的内容前面插入新内容 举例

::before伪元素的特点： 1第一个子元素 2行级元素 3内容通过content写入 4标签上找不到对应的标签

4,Element::after 对元素的内容后面插入新内容 可以用来清除浮动 举例

5,Element::selection 设置文本选中后的背景色与前景色 举例