CSS 常用伪类简介

CSS 常用伪类简介

CSS伪类是用来添加一些选择器的特殊效果，伪类包含两种：状态伪类（UI伪类）和结构性伪类。

(1)状态伪类是基于元素当前状态进行选择的。

在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类主要包括：

:link应用于未被访问过的链接；

:hover应用于鼠标悬停到的元素；

:active应用于被激活的元素；

:visited应用于被访问过的链接，与:link互斥。

:focus应用于拥有键盘输入焦点的元素。

:target应用于链接点击后指向元素

实例

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类的名称不区分大小写。

(2)结构性伪类是css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的包括：

: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选择的元素里面没有任何内容。

实例

匹配第一个 <p> 元素，可以使用 :first-child 伪类来选择父元素的第一个子元素

p:first-child
{
    color:blue;
}

匹配最后一个 <p> 元素，可以使用 :last-child 伪类来选择父元素的第一个子元素

p:last-child
{
    color:blue;
}

匹配第二个 <p> 元素，可以使用 :nth-child(n) 伪类来选择父元素的第二个子元素

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

p:nth-child(2)
{
    color:red;
}

匹配倒数第二个 <p> 元素，可以使用 :nth-last-child 伪类来选择父元素的倒数第二个子元素

p:nth-last-child(2)
{
    color:red;
}

匹配所有的奇数元素（2n + 1）

p:nth-child(2n + 1) 
{
    color: red;
}
/*或者一下方式*/
p:nth-child(odd) 
{
    color: red;
}

匹配所有的偶数元素(2n)

p:nth-child(2n) 
{
    color: red;
}
/*或者一下方式*/
p:nth-child(even) 
{
    color: red;
}

奇数(add)和偶数(even)是可以作为关键字使用用于相匹配的子元素

匹配前三个(-n + 3)

p:nth-child(-n + 3)
{
    color:red;
}

匹配后三个(-n + 3)

p:nth-last-child(-n + 3)
{
    color:red;
}

匹配跳过前三个(n + 4)

p:nth-child(n + 4)
{
    color:red;
}