第三章目标伪类： 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>热爱 - 有机会改变一切</title>
 6     <style>
 7         :target{
 8             border: 2px solid red;
 9             background-color: lightyellow;
10         }
11     </style>
12 </head>
13 <body>
14 <a href="#a1">跳a16</a>
15 <a href="#a2">跳a28</a>
16     <p>kkkkkkkkkkkk</p>
17     <p>kkkkkkkkkkkk</p>
18     <p>kkkkkkkkkkkk</p>
19     <p>kkkkkkkkkkkk</p>
20     <p>kkkkkkkkkkkk</p>
21     <p>kkkkkkkkkkkk</p>
22     <p>kkkkkkkkkkkk</p>
23     <p>kkkkkkkkkkkk</p>
24     <p>kkkkkkkkkkkk</p>
25     <p>kkkkkkkkkkkk</p>
26     <p>kkkkkkkkkkkk</p>
27     <p>kkkkkkkkkkkk</p>
28     <p>kkkkkkkkkkkk</p>
29     <p>kkkkkkkkkkkk</p>
30     <p>kkkkkkkkkkkk</p>
31     <p>kkkkkkkkkkkk</p>
32     <p>kkkkkkkkkkkk</p>
33     <p id="a1">6666666666666666666666</p>
34     <p>525225</p>
35     <p>525225</p>
36     <p>525225</p>
37     <p>525225</p>
38     <p>525225</p>
39     <p>525225</p>
40     <p>525225</p>
41     <p>525225</p>
42     <p>525225</p>
43     <p>525225</p>
44     <p>525225</p>
45     <p>525225</p>
46     <p>525225</p>
47     <p>525225</p>
48     <p>525225</p>
49     <p>525225</p>
50     <p>525225</p>
51     <p>525225</p>
52     <p>525225</p>
53     <p>525225</p>
54     <p>525225</p>
55     <p>525225</p>
56     <p>525225</p>
57     <p>525225</p>
58     <p>525225</p>
59     <p>525225</p>
60     <p>525225</p>
61     <p>525225</p>
62     <p>525225</p>
63     <p>525225</p>
64     <p>525225</p>
65     <p>525225</p>
66     <p>525225</p>
67     <p id="a2">88888888888888888888888888</p>
68 </body>
69 </html>

 

 

 

否定伪类：

1 :not(p){
2             background-color: red;/*除了p的*/
3         }
4         .div{
5             background-color: red;/*<div>的子元素中class不为test的所有其他元素*/
6         }

 

posted on 2018-11-22 10:30  马文奇  阅读(77)  评论(0)  编辑  收藏  举报

导航