CSS伪类
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
相关新闻>>
- 发表评论
-
- 最新评论 更多>>