CSS 简明教程 - CSS 伪类

yufei       2 年, 4 月 前       289

CSS 伪类主要用于向选择器添加特殊状态,我们可以使用 CSS 伪类 ( 而不是使用 JavaScript ) 为 HTML 元素实现一些简单的效果,例如悬停动画

语法规则

伪类的语法规则很简单,使用形式一般如下

selector:pseudo-class {
    property: value;
}

注意:伪类是区分大小写的

伪类也可以添加到 class 属性上,这时候 selector 是可选的,例如

[selector].class:pseudo-class {
    property: value;
}

锚点伪类

CSS 链接 章节中,我们了解到 <a> 元素有四种状态:未访问 ( :link ),已访问 ( :visited ),悬停 ( :hover ) 和 活动 ( active)

这四种状态的样式由 CSS 伪类定义,例如

/* 未访问时样式 */
a:link {
    color: #FF0000;
}

/* 已访问时样式 */
a:visited {
    color: #00FF00;
}

/* 鼠标经过时样式 */
a:hover {
    color: #FF00FF;
}

/* 选择链接时样式 */
a:active {
    color: #0000FF;
}

注意:当你为链接的不同状态设置样式时,请遵循以下规则:a:linka:visited 必须在 a:hover 之前,并且 a:active 只能放在最后,也就是 a:hover 之后

如果要在页面中定义几组不同的链接效果,可以同时使用 CS S类和 CSS 伪类

例如,我们可以定义一组链接,其初始颜色为红色,访问之后变为蓝色,同时,我们定义另一组链接,其初始颜色为绿色,并在访问后变为黄色

a.red:link {
    color: #FF0000;
}
a.red:visited {
    color: #0000FF;
}
a.blue:link {
    color: #00FF00;
}
a.blue:visited {
    color: #FF00FF;
}

HTML 代码如下

<a class="red" href="#">这是第一组链接样式</a>
<a class="blue" href="#">这是第二组链接样式</a>

:first-child 伪类

:first-child 伪类表示父元素的第一个子元素

例如下面的范例设置第一个 <li> 的颜色为黄色

li:first-child {
    color: orange;
}

HTML 代码如下

<ul>
    <li>该文本将是黄色</li>
    <li>该文本将会使用默认的颜色</li>
    <li>该文本将会使用默认的颜色</li>
</ul>

例如下面的示例设置每个 <li> 下的第一个 <span> 元素的的文本颜色为黄色且使用斜体

<style>
li > span:first-child {
    color: orange;
    font-style: italic;
}
</style>

<ul>
    <li><span>文本</span> 将会是黄色</li>
    <li><span></span> 文本 <span></span> 使用默认颜色</li>
    <li><span>文本</span> 将使用默认颜色</li>
</ul>

例如下面的示例设置第一个 <li> 中的所有 <span> 的文本设置为黄色且倾斜

<style>
li:first-child span {
    color: orange;
    font-style: italic;
}
</style.
<ul>
    <li><span>文本</span> 将会 <span>是黄色</span>.</li>
    <li>该文本 <span></span> 使用默认颜色</li>
    <li><span>文本</span> 将使用默认颜色</li>
</ul>

注意: 在 IE8 及以下浏览器中必须设置 <!DOCTYPE> 才能使用 :first-child 伪类

:first-of-type 伪类

:first-of-type 伪类表示父容器中所有类型元素的第一个元素

例如下面的示例中,第一个 <li> 元素和第一个 <span> 元素的文本颜色将为橙色

<style>
ul:first-of-type {
    color: orange;
}
</style>

<ul>
    <li>这段文本将会是黄色</li>
    <li>这段 <span>文本</span><span>是默认颜色</span></li>
    <li><span>段文本将会是</span> 默认颜色</li>
</ul>

:lang 伪类

:lang 伪类允许为不同的语言定义特殊规则

例如下面的示例中,:lang 使用 lang="no" 定义 <q> 元素的引号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>一些文本 <q lang="no">段落文本中的引号</q> 文本</p>
</body>
</html>

:nth-child 伪类

:nth-child 伪类是 CSS 中最灵活的伪类之一,所有 :nth 伪类都有一个参数可以包含三种类型

  • 一个整型
  • 公式 a + b ( ab 都是整数 )
  • oddeven 关键字

例如下面的希腊单词列表

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

示例 1 : 将第二个单词 Beta 的颜色设置为橙色

ol :nth-child(2) {
    color: orange;
}

示例 2 : 将第二个、第四个、第六个、第八个...的颜色设置为橙色

ol :nth-child(2n) {
    color: orange;
}

示例 3 : 将偶数字的颜色设置为橙色

ol :nth-child(even) {
    color: orange;
}

示例 4 : 从第六个子元素开始,设置第六个、第十二个、第十八个...的颜色为橙色

ol :nth-child(2n+6) {
    color: orange;
}

所有的伪类

有关更多 CSS 中的伪类,可以访问我们的 CSS 参考手册:选择器

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.