CSS伪类

来源:网络整理 责任编辑:栏目编辑 发表时间:2013-07-01 17:34 点击:

CSS pseudo-classes are used to add special effects to some selectors.
CSS伪类被用来给一些选择器添加特殊效果(一般用在连接效果)

CSS伪类的语法有两种。

第一种:

selector:pseudo-class {property: value}
例句:

a:link {color:red}
第二种:

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

a.c1:link {color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下:

a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
演示示例

也可以用HTML的class属性来设定伪类。例句如下:

a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

具体的关于此概念可以参考:http://www.netvtm.com/w3s/css/css-pseudo-class.html

In this example, the selector matches any a element that is the first child of any element, and sets the text-decoration to none:
在这个例子中,选择器将与任何一个以a为第一子元素的元素进行匹配,并且没有文字修饰:

a:first-child
{
text-decoration:none
}For example, the first a in the HTML below is the first child of the paragraph and will not be underlined. But the second a in the paragraph is not the first child of the paragraph and will be underlined:
举个例子,下面HTML中第一个连接就没有下横线显示,但第二个连接就有:

<p>
Visit <a href="http://www.w3schools.com">W3Schools</a>
and learn CSS!
Visit <a href="http://www.w3schools.com">W3Schools</a>
and learn HTML!
</p>CSS2 - The :lang Pseudo-class
CSS2 :lang伪类
The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":
:lang伪类允许定义不同语言的特殊规则。在下面的例子里:lang类通过一个lang属性值为"no"定义了q元素的引号类型:

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head><body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body></html>
--------------------------------------------------------------------------------

Pseudo-classes
伪类
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Pseudo-class Purpose IE F N W3C
:active Adds special style to an activated element 4 1 1
:focus Adds special style to an element while the element has focus - - 2
:hover Adds special style to an element when you mouse over it 4 1 7 1
:link Adds special style to an unvisited link 3 1 4 1
:visited Adds special style to a visited link 3 1 4 1
:first-child Adds special style to an element that is the first child of some other element 1 7 2
:lang Allows the author to specify a language to use in a specified element 1 2

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • 扎实基础 9则css网页制作技巧
    • CSS设计符合Web标准的网页表单的几个技巧
    • 技巧:css星级效果总结
    • 用CSS建设网站的实例(9)
    • 提高网站性能:JavaScript+CSS优化的建议(3)
    • CSS制作网页实例:用CSS控制li标记样式
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1