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)