8.1.3 CSS3选择器 —— 伪类

1. E:target 表示当前的URL片段的元素类型,这个元素必须是E(也就是选取当前活动的目标元素)

代码:这里活动元素变成了金色

<head>
    <style>
        div{width:300px;height:200px;background:#000; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:block;}
        div:target{ display:block; background: gold; }
    </style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>

2.1 E:disabled 表示不可点击的表单控件

2.2 E:enabled 表示可点击的表单控件

3. E:checked 表示已选中的checkbox或radio

4.1 E:first-line 表示E元素中的第一行

4.2 E:first-letter 表示E元素中的第一个字符

5. E::selection 表示E元素在用户选中文字时

6.1 E::before 生成内容在E元素前

6.2 E::after 生成内容在E元素后

例:p:after{ content: "MiaoV"; display: block; border: 1px solid #000; }

7. E:not(s) 表示E元素不被匹配

8. E~F表示E元素毗邻的F元素(选择的是后面的元素)

例:p~h1{ color: red; }  // 这里选择的是p后面的相邻的h1

9. Content 属性(一般配合E::before和E::after)

原文地址:https://www.cnblogs.com/zouxinping/p/4951103.html