文章内容

2016/12/29 13:24:59,作 者: 黄兵

CSS伪类

1. 链接伪类

针对链接的伪类一共有4 个,因为链接始终会处于如下4 种状态之一。

Link。此时,链接就在那儿等着用户点击。

 Visited。用户此前点击过这个链接。

 Hover。鼠标指针正悬停在链接上。

 Active。链接正在被点击(鼠标在元素上按下,还没有释放)。

以下就是这些状态对应的4 个伪类选择符(使用了a 选择符和一些示例声明):

a:link {color:black;}

a:visited {color:gray;}

a:hover {text-decoration:none;}

a:active {color:red;}

2. :focus 伪类

e:focus

在这个以及后续的例子中,e 表示任何元素,如p、h1、section,等等。

表单中的文本字段在用户单击它时会获得焦点,然后用户才能在其中输入字符。下面的规则

input:focus {border:1px solid blue;}

会在光标位于input 字段中时,为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

3. :target 伪类

e:target

如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target 伪类选中它。

对于下面这个链接

<a href="#more_info">More Information</a>

位于页面其他地方、ID 为more_info 的那个元素就是目标。该元素可能是这样的:

<h2 id="more_info">This is the information you are looking for.</h2>

那么,如下CSS 规则

#more_info:target {background:#eee;}

会在用户单击链接转向ID 为more_info 的元素时,为该元素添加浅灰色背景。

分享到:

发表评论

评论列表

user-ico

好人 on 回复 有用(4

内容不错,正是我要找的内容。