CSS 伪类

CSS 伪类选择器基于附加条件匹配元素,并且不一定由文档树定义。

什么是伪类

CSS 伪类允许你设置元素的动态状态,例如悬停,活动和焦点状态,以及文档树中存在的元素,但不能通过使用其他选择器来定位而不添加任何元素它们的 ID 或类,例如,定位第一个或最后一个子元素。

伪类以冒号(:) 开头。其语法如下:

selector:pseudo-class { property : value ; } 

以下部分描述了最常用的伪类。

锚伪类

使用 anchor 伪类链接可以以不同的方式显示:

这些伪类使你可以将未访问的链接设置为与访问过的链接不同。最常见的样式技术是从访问过的链接中删除下划线。

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

一些锚伪类是动态的 - 它们是作为用户与文档交互的结果而应用的,例如悬停或焦点等。

a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

这些伪类更改链接的呈现方式以响应用户操作。

  • :hover 适用于当用户将光标放在元素上但不选择它时。
  • :active 适用于激活或单击元素时。
  • :focus 适用于当元素具有键盘焦点时。

注: 为了使这些伪类很好地工作,你必须在正确的顺序将它们定义- , :link:visited:hover :active:focus

:first-child 伪类

:first-child 伪类匹配的是一些其他元素的第一个子元素的元素。下面示例中的 ol li:first-child 选择器选择有序列表的第一个列表项,并从中删除顶部边框。

ol li:first-child {
    border-top: none;
}

注意::first-child 在 Internet Explorer 8 及更早版本中工作,必须在文档顶部声明。 <!DOCTYPE>

:last-child 伪类

:last-child 伪类匹配的是一些其他元素的最后一个子元素的元素。下例中的 ul li:last-child 选择器从无序列表中选择最后一个列表项,并从中删除右边框。

ul li:last-child {
    border-right: none;
}

注意: CSS :last-child 选择器在 Internet Explorer 8 和早期版本中不起作用。Internet Explorer 9 及更高版本支持。

:nth-child 伪类

CSS3 引入了一个新的 :nth-child 伪类,允许你定位给定父元素的一个或多个特定子元素。此选择的基本语法为 :nth-child(N) ,其中 N 是一个参数,其可以是一个数字,一个关键字(evenodd),或表达式 xn+y ,其中 xy 是整数(例如 1n2n2n+1 ,…)。

table tr:nth-child(2n) td {
    background: #eee;
}

上例中的样式规则只是突出显示备用表行,而不向 <table> 元素添加任何 ID 或类。

提示:在必须选择在特定间隔或模式中出现在文档树内部的元素(如偶数或奇数位置等)的情况下,CSS :nth-child(N) 选择器非常有用。

:lang 伪类

语言伪类 :lang 允许基于特定标签的语言设置构建选择器。

q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

注意: 版本 7 以下的 Internet Explorer 不支持 :lang 伪类。仅当指定了 <!DOCTYPE> 时,IE8 才支持。

伪类和 CSS 类

伪类可以与 CSS 类结合使用。

以下示例中的 class="red" 链接将以红色显示。

a.red:link {    /* style rule */
    color: #ff0000;
}
<a class="red" href="#">Click me</a>    /* HTML code snippet */
PREVIOUS PAGE