E:target 表示当前的URL片段的元素类型，这个元素必须是E
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>伪类选择器</title>
6 <style>
7 div{display: none}
8 div:target{display: block;}
9 </style>
10 </head>
11 <body>
12
13 <a href="#div1">div1</a>
14 <a href="#div2">div2</a>
15 <a href="#div3">div3</a>
16 <div id="div1">div1</div>
17 <div id="div2">div2</div>
18 <div id="div3">div3</div>
19
20 </body>
21 </html>
demoE:disabled 表示不可点击的表单控件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>伪类选择器</title>
6 <style>
7 input:disabled{
8 background: #fff;
9 border:1px solid #ddd;
10 cursor:not-allowed;
11 }
12 </style>
13 </head>
14 <body>
15 <input type="text" placeholder="请输入文字" disabled />
16 </body>
17 </html>
demo
E:enabled 表示可点击的表单控件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>伪类选择器</title>
6 <style>
7 input:enabled {
8 line-height: 24px;
9 background: #fff;
10 border:1px solid #ddd;
11 }
12 </style>
13 </head>
14 <body>
15 <input type="text" placeholder="请输入文字" />
16 </body>
17 </html>
demo
E:checked 表示已选中的checkbox或radio
E::before 生成内容在E元素前
E::after 生成内容在E元素后
例子：demo
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 input{display: none}
8 label {
9 position: relative;
10 display: block;
11 width: 50px;
12 height:25px;
13 border:1px solid #ddd;
14 border-radius:12px;
15 background: gray;
16 transition: all 0.1s ease-in;
17 }
18 label:before{
19 content: '';
20 position:absolute;
21 left: 0;
22 top:0;
23 width: 25px;
24 height: 25px;
25 border-radius:50%;
26 background:#fff;
27 transition: all 0.1s ease-in;
28 }
29
30 input:checked~label{
31 background: #8af4aa;
32 }
33 input:checked~label:before{
34 left: 25px;
35 }
36 </style>
37 </head>
38 <body>
39
40 <input id="play" type="checkbox" name="play" value="游戏" /><label for="play"></label>
41
42 </body>
43 </html>
demo
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素