CSS伪类选择器根据其他条件匹配组件,而不一定由文档树定义。CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
CSS伪类允许您设置元素的动态状态的样式,例如悬停,活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们的ID或类,例如,针对第一个或最后一个子元素。
伪类以冒号(:)开头。可以通过以下方式给出其语法:
以下部分描述了最常用的伪类。
使用锚伪类链接可以以不同的方式显示:
这些伪类使您可以对未访问的链接进行样式化,而对访问的链接进行样式化。最常见的样式设置技术是从访问的链接中删除下划线。
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, :focuss
:first-child伪类匹配的是一些其他元素的第一个子元素的元素。ol li:first-child在下面的示例中,选择器选择一个有序列表的第一个列表项,并从其顶部删除边框。
ol li:first-child { border-top: none; }测试看看‹/›
:last-child伪类匹配的是一些其他元素的最后一个子元素的元素。下ul li:last-child例中的选择器从无序列表中选择最后一个列表项,并从其中删除右边框。
ul li:last-child { border-right: none; }测试看看‹/›
注意: CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。
CSS3引入了一个新的:nth-child伪类,使您可以将给定父元素的一个或多个特定子对象作为目标。此选择的基本语法可以与给予:nth-child(N),其中N是一个参数,其可以是一个数字,一个关键字(even或odd),或形式的表达xn+y,其中x和y是整数(例如1n,2n,2n+1,...)。
table tr:nth-child(2n) td { background: #eee; }测试看看‹/›
上面示例中的样式规则仅突出显示了代替表行,而没有向元素添加任何ID或类。
提示: CSS :nth-child(N)选择器在必须选择以特定间隔或模式(例如在偶数或奇数位置等)出现在文档树内的元素的情况下非常有用。
语言伪类:lang允许根据特定标记的语言设置来构造选择器。:lang以下示例中的伪类为明确赋予语言值的元素定义了引号no。
q:lang(no) { quotes: "~" "~"; } /* HTML code snippet */Some text A quote in a paragraph Some text.测试看看‹/›
伪类可以与CSS类结合使用。
class="red"在下面的示例中,带有的链接将显示为红色。
a.red:link { /* style rule */ color: #ff0000; } <a class="red" href="#">Click me</a> /* HTML code snippet */测试看看‹/›