css伪类选择器详细解析及案例使用-----伪类选择器（1）

时间：2016-07-24 10:32:49 阅读：150 评论：0 收藏：0 [点我收藏+]

标签：

动态伪类选择器：
E:link ：选择匹配的E元素，并且匹配元素被定义了超链接并未被访问过。
E:visited ：选择匹配的E元素，而且匹配的元素被定义了连接并已被访问过。
E:active ：选择匹配的E元素，且匹配的元素被激活。常用于锚点与按钮上。
E:hover ：选择匹配的E元素，且用户鼠标停留在元素上。
E:focus ：选择匹配的E元素，且元素获得焦点。

锚点伪类设置遵守“爱恨原则”，即LoVe/HAte，也就是“link-visited-hover-active”。
目标伪类选择器（此为动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效）
E:target ：匹配E元素之下的子元素中，被url链接到的那个子元素。
在下边的例子中，被#div1 :target匹配的元素是#div2，他不仅是#div1的子元素，而且被url(a标签href="#div2")指向。两条件缺一不可。（此为自我理解，非官方解释）。
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1 :target p{
	    color: red;
	};
    </style>
</head>
<body>
    <div id="div1">
        i am div1
	<div id="div2">
	    i am div2 
            <p>pppp</p>
	 </div>
    </div>
    <a href="#div2">click me</a>
</body>
</html>
```
　　
语言伪类选择器：
E:lang(language) ：选择匹配E的所有元素，且匹配元素制定了lang属性，而且其值为language。
设置文档语言有两种方法。第一，如果使用HTML5，可如此设置：
```
<html lang="en-US">
```
或者手工在文档中指定：
```
<body lang="fr">
```
UI元素状态伪类选择器：
E:checked ：匹配选中的复选按钮或单选按钮表单元素
E:enabled ：匹配所有启用的表单元素
E:disabled ：匹配所有禁用的表单元素

标签：

原文地址：http://www.cnblogs.com/wangkaiyuan/p/5700186.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行