伪类用于定义元素的特殊状态。 例如,它可用于:
后代选择器匹配作为指定元素后代的所有元素。以下示例选择
元素:
选择器:伪类 { 属性:值; }
链接可以以不同方式显示:
/* 未访问的链接 */ a:link { color: red; } /* 已浏览过的链接 */ a:visited { color: green; } /* 鼠标悬停时候的链接 */ a:hover { color: hotpink; } /* 选定的链接 */ a:active { color: blue; }
注意:a:hover必须在CSS定义a:link之后和a:visited之后才能生效!a:active必须 a:hover在CSS定义之后才能有效!伪类名称不区分大小写。
伪类可以与CSS类结合使用:当您将鼠标悬停在示例中的链接上时,它将更改颜色:
a.highlight:hover { color: #ff0000; }
:hover在
div:hover { background-color: blue; }
将鼠标悬停在
元素(如工具提示)
p {display: none;background-color: yellow;padding: 20px; } div:hover p {display: block; }
:first-child伪类指定的元素是另一个元素的第一个子匹配。 在以下示例中,选择器匹配任何元素的第一个子元素
p:first-child { color: blue; }
匹配所有
元素中的第一个元素
p i:first-child { color: blue; }
匹配所有第一个子
元素中的所有元素
p:first-child i { color: blue; }
:lang伪类允许定义不同语言的特殊规则。在下面的示例中,:lang使用lang=“no”定义元素的引用:
元素的引用:
q:lang(no) { quotes: "~" "~"; }
元素
元素,它是其父元素的第一个
元素,它是其父元素的最后一个
元素的每个元素
元素作为其父元素的第二个子元素,从最后一个子元素开始计算
元素作为其父元素的第二个
元素,从最后一个子元素开始计算
元素,它是其父元素的第二个
元素,它是其父元素的唯一
元素,它是其父元素的唯一子元素
元素后插入内容
元素之前插入内容
元素的第一个字母
元素的第一行