css3选择器（三）—伪类选择器-CSDN博客

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>

demo

E: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元素

转载于:https://www.cnblogs.com/wmh1106/p/6053741.html