肉渣教程

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 伪类

上一节 下一节