CSS伪类

来源：互联网发布：微信检测僵尸粉源码编辑：程序博客网时间：2024/06/06 13:09

CSS伪类用于向某些选择器添加特殊的效果。

伪类的语法：

selector : pseudo-class {property: value}

CSS类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

锚伪类

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

在支持CSS的浏览器中，链接的不同状态都可以以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和

鼠标悬停状态。

伪类和CSS类

伪类可以与CSS类配合使用：

a.red : visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>

假如上面的例子中的链接被访问过，那么它将显示为红色。

CSS2 ：first-child伪类

p:first-child {font-weight: bold;}li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有P元素设置为粗体。

第二个规则将作为某个元素第一个子元素的所有li元素变成大写。

注意：最常见的错误是认为p：first-child之类的选择器会选择p元素的第一个子元素。

例子 1 匹配第一个元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的p元素：

<html><head><style type="text/css">p:first-child {  color: red;  } </style></head><body><p>some text</p><p>some text</p></body></html>

例子 2 匹配所有元素中的第一个元素

选择器匹配所有元素中的第一个元素

<html><head><style type="text/css">p > i:first-child {  font-weight:bold;  } </style></head><body><p>some <i>text</i>. some <i>text</i>.</p><p>some <i>text</i>. some <i>text</i>.</p></body></html>

例子 3 匹配所有作为第一个子元素的元素的所有元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的元素中的所有元素：

<html><head><style type="text/css">p:first-child i {  color:blue;  } </style></head><body><p>some <i>text</i>. some <i>text</i>.</p><p>some <i>text</i>. some <i>text</i>.</p></body></html>

0 0