当前位置:首页 > CSS手册 > 正文

CSS伪类

作者:不详 来源: 【 】 浏览: 添加日期:2008-12-12 我要评论(0)     

CSS 伪类

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

CSS 定位属性

伪类的语法:

selector:pseudo-class{property:value;}

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

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

锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link{color:#FF0000}     /* unvisited link */
a:visited{color:#00FF00}  /* visited link */
a:hover{color:#FF00FF}   /* mouse over link */
a:active{color:#0000FF}   /* selected link */

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

提示:伪类名称对大小写不敏感。

伪类和 CSS 类

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

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

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

CSS2 - :first-child 伪类

:first-child 伪类对另一个元素的第一个子元素进行匹配。

例子 1:

在这个例子中,选择器对 div 元素中的第一个子元素为 p 的元素进行匹配 - 对 div 元素内的第一个段落进行缩进:

div>p:first-child{
    text-indent:25px;
}
<div>
	<p>div中的第一段。这个段落将被缩进。</p>
	<p>div中的第二段。这个段落不会被缩进。</p>
</div>

下面的 HTML 中的段落将不会被匹配:

<div>
	<h1>Header</h1>
	<p>div中的第一段,但不是div中的第一个子元素。这个段落不会被缩进。</p>
</div>

例子 2:

在这个例子中,选择器将对 p 元素中的第一个子元素为 em 的元素进行匹配 - 并且将 p 元素中的第一个 em 元素设置为粗体:

p:first-child em{
    font-weight:bold;
}

例如,下面的 HTML 中的 em 是段落的第一个子元素:

<p>I am a <em>strong</em> man.</p>

例子 3:

在这个例子中,选择器将对任何元素的第一个子元素为 a 的元素进行匹配 - 将 text-decoration 属性设置为 none:

a:first-child{
    text-decoration:none;
}

例如,下面的 HTML 中的第一个 a 元素是段落中的第一个子元素,所以没有下划线。

但是第二个 a 不是段落的第一个子元素,所以有下划线。

<p>访问<a href="http://www.w3school.com.cn">W3School</a>学习CSS!
访问<a href="http://www.w3school.com.cn">W3School</a>学习HTML!</p>

CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:

<html>
<head>
<style type="text/css">
	q:lang(no){quotes: "~" "~";}
</style>
</head>
<body>
	<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body>
</html>

伪类

属性 描述
:active 将样式添加到被激活的元素。
:focus 将样式添加到被选中的元素。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 将特殊的样式添加到未被访问过的链接。
:visited 将特殊的样式添加到被访问过的链接。
:first-child 将特殊的样式添加到元素的第一个子元素。
:lang 允许创作者来定义指定的元素中使用的语言。

 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖CSS手册〗Tags:

把本文章添加到会员中心我的学习计划里

相关文章

更多评论(0)..会员评论

出差旅游免费预订酒店

【视频教程】新手常见问题