CSS进阶知识点--CSS3伪类选择器和伪元素

伪类选择器

• 动态伪类（锚点伪类、用户行为伪类）

• UI元素状态伪类

• CSS3结构伪类

• 否定选择器

• 伪元素

动态伪类

这些伪类并不存在与 HTML 中，只有当用户和网站交互的时候才能体现出来

锚点伪类

• :link

• :visited

用户行为伪类

• :hover

• :active

• :focus（获取到焦点时的样式）

UI元素状态伪类

概念

我们把":enabled", ":disabled", "checked"伪类称为UI元素状态伪类

CSS3结构类

CSS3的:nth选择器

我们把CSS3的:nth选择器也称为CSS3结构类

选择方法

• :first-child

• :last-child

• :nth-child()

• :nth-last-child()

• :nth-of-type()

• :nth-last-of-type()

• :first-of-type

• :last-of-type

• only-child

• only-of-type

• :empty

Element:first-child

概念

选择属于其父元素的首个子元素，并为其设置样式

Element:last-child

概念

选择属于其父元素的最后一个子元素，并为其设置样式

Element:nth-child(N)

概念

选择属于其父元素的第N个子元素，不论元素的类型

关于参数（N）

• odd 相当于2n+1

• even 相当于2n

Element:nth-last-child(N)

概念

选择属于其父元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

Element:nth-of-type(N)

概念

选择属于其父元素的特定类型的第N个子元素的每个元素

Element:nth-last-of-type(N)

概念

选择属于其父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

Element:first-of-type

概念

选择属于其父元素的特定类型的首个子元素

Element:last-of-type

概念

选择属于其父元素的特定类型的最后一个子元素

Element:only-child

概念

选择属于其父元素的唯一子元素

Element:only-of-type

概念

选择属于其父元素的唯一特定类型的子元素

Element:empty

概念

选择没有子元素（包括文本节点）的每个元素

否定选择器

概念

:not(Element/selector)选择器匹配非指定元素/选择器的每个元素

语法格式

父元素:not(子元素/子选择器)

伪元素

CSS 伪元素用于向某些选择器设置特殊效果

语法格式

元素::伪元素（Element::pseudo-element）

Element::first-line

概念

根据"first-line"伪元素中的样式对 Element 元素的第一行文本进行格式化

说明

"first-line"伪元素只能用于块级元素

Element::first-letter

概念

用于向文本的首字母设置特殊样式

说明

"first-letter"伪元素只能用于块级元素

Element::before

概念

在元素的内容前面插入新内容

说明

常配合"content"配合使用

特点

1. 第一个子元素

2. 行级元素

3. 内容通过 content 写入

4. 标签中找不到对应标签，只能在浏览器开发者工具那可以找到

Element::after

概念

在元素的内容后面插入新内容

说明

常配合"content"配合使用，常用于清除浮动

Element::selection

概念

用于设置在浏览器中选中文本后的背景色与前景色

兼容性说明

::selection 在IE家族中，只有IE9+ 版本支持，在 Firefox 中需要加上其前缀"-moz"