CSS伪类

伪类

• 简介：

伪类：这个叫法源于它们跟类相似，但实际上并没有类会附加到标记的标签上。

伪类分为两种：

-UI伪类：会在HTML元素处于某种状态时（例如：鼠标指针位于指针上），为该元素应用CSS样式。Hover

-结构化伪类：会在标记中存在某种结构上的关系时（例如：某元素是一组元素中的第一个或最后一个），为该元素应用CSS样式。

二、UI伪类

 UI元素状态伪类选择器有如下几个：

    Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。

    Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。

    Selector:hover ：匹配Selector选择器且处于鼠标悬停状态的元素。

    Selector:active ：匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)

     的状态的元素。

    Selector:focus ：匹配Selector选择器且已得到焦点的元素。

    Selector:enabled ：匹配Selector选择器且当前用于处于不可用状态的元素。

    Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。

    Selector：checked :匹配Selector选择器且当前处于选中状态的元素。

    

    Selector：default :匹配Selector选择器且页面处于打开时选中状态的元素

     (即使当前没有被选中亦可)。

    Selector：read-only :匹配Selector选择器且当前处于只读状态的元素

    Selector：read-wirte :匹配Selector选择器且当前处于读写状态的元素

Selector：selection :匹配Selector选择器的元素中当前被选中的内容。

    

    特别提示：1、一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。

     2、上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种状态下的多个元素。

例：

101

• 结构化伪类

结构化伪类选择器如下：

Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是元素

Selector:first-child : 表示一组同胞元素中的第一个元素。

    Selector:last-child  : 表示一组同胞元素中的最后一个元素。

    Selector:nth-child(n)  : 表示一组同胞元素中的第n个元素。(顺数第n个)

    Selector:nth-last-child(n)  : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)

    

    Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。

    还有其他的几个结构化选择器：和上面的类似

    Selector:first-of-type

    Selector:last-of-type

    Selector:nth-of-type(n)

    Selector:nth-last-of-type(n)

  Selector:empty

例：

li:first-child{

color:yellow;

}

li:last-child{

color:#60C;

}

li:nth-child(2){

color:#2326C4;

}

li:nth-last-child(3){

color:#2326C4;

}

li:only-child{

color:#900;

}

• 伪元素

伪元素就是在你的文档中若有实无的元素

（就是在HTML代码中没有，但是我们可以通过CSS的样式设置伪元素，让它显示给我们看到）

伪元素：

::first-letter 伪元素 第一个字母

::first-line 伪元素 第一行

::before 和 ::after 伪元素

/*在#p这个段落的开始添加文字*/

#p::before {

content: "大家好，";

}

/*在#p这个段落的末尾添加文字*/

#p::after {

content: "我是张三。";

}

• Selector1：not(Slector2)

匹配Selector1,但不匹配Slector2，相当于从Selector1中减去Slector2

• Slector：target（target 目标）

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target）。