CSS _ CSS 伪类

CSS 伪类

什么是伪类？

伪类（pseudo-class）是用来定义某个元素的某种特殊状态。以帮助选择器更灵活地选择目标对象。

举一些例子：

当鼠标悬停在某个元素上时的元素样式
当某个链接元素被访问过后的表现样式
当一个元素被选中的状态

鼠标悬停在这里试试呀，不要点击，汝看看鼠标悬停后该元素的变化就可以啦~

语法

使用伪类的选择器的语法方式如下：

selector:pseudo-class {
    property:value;
}

跟链接元素相关的伪类

链接元素配合如下几种不同的伪类，则有不同的展示方式：

/* 没有被访问过的链接 */
a:link {
    color: blue;
}

/* 访问过的链接 */
a:visited {
    color: gray;
}

/* 被鼠标悬停在上方的链接 */
a:hover {
    color: green;
}

/* 被选中的链接元素 */
a:active {
    color: red;
}

运行一下

因为后面的样式表会覆盖前面的样式表，所以同一个元素这几类伪类的引入需要注意前后顺序，否则会被覆盖而难以生效。 a:hover 必须放在 a:link 和 a:visited 后面，否则不会有效果的。a:active必须放在 a:hover 后面，否则不会有效果。

伪类和类（Class）的组合

伪类和类（Class）的组合使用，顺理成章，天经地义，没什么好解释的，看例子吧：

a.jerk:hover {
    color: #46acb6;
    font-size: 48px;
}

运行一下

<div> 被鼠标悬停的样式（hover）

举一个div元素的被鼠标悬停状态下的样式设置。

div:hover {
    color: white;
    background: #46acb6;
}

运行一下

通过悬停来实现弹出另外一个元素

这是使用悬停伪类（:hover）的一个复合技巧，如下列所示：

p {
    display: none;
    background-color: black;
    color: white;
    padding: 20px;
}

div:hover p {
    display: block;
}

运行一下

:first-child 伪类

:first-child 伪类与具体的选择器组合，则代表符合选择器规则的第一个元素。

案例1：选择第1个p元素

p:first-child {
    color: blue;
}

运行一下

案例2：选择所有p元素中第1个i元素

p i:first-child {
    color: blue;
}

运行一下

案例3：选择第1个p元素中所有的i元素

p:first-child i {
    color: blue;
}

运行一下

使用 :lang 伪类

:lang 伪类可以根据不同的语言来设置元素的不同样式。如下例所示:lang伪类是用来选择lang属性等于指定值的q元素。

<html>
<head>
<style>
q {
    display: none;
}

/* 选择是哪种语言可以在这里动态设置 */
q:lang(German) {
    display: block;
}
</style>
</head>

<body>

<q lang="English">You are very beautiful.</q>
<q lang="Chinese">汝真美。</q>
<q lang="German">Du bist sehr schön</q>
<q lang="Japanese">あなたはとてもきれいです</q>
<q lang="Italian">Sei davvero bellissima</q>

</body>
</html>

运行一下

CSS 伪类

推广