|
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
(出处:源码网)
|