样式的继承+选择器的优先级+伪类的优先级

1.样式的继承

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7         
 8        </style>
 9     </head>
10     <body>
11         <!--
12         祖先元素的样式会被他的后代继承
13         利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将自动继承这些样式
14         
15         但是并不是所有的样式都会被子元素所继承,比如 背景相关,边框相关,定位相关的样式都不会被继承
16         -->
17         <p style="font-size: 30px;">
18             abc1
19             <span>abc2</span>
20         </p>
21         <span>abc3</span>
22         <div style="background-color: aqua;">
23             <p>
24                 abc4
25                 <span>abc5</span>
26             </p>
27         </div>
28     </body>
29 </html>

2.选择器的继承

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7         .p1{
 8             background-color: yellow;
 9         }
10         p{
11             background-color: red;
12         }
13         #p2{
14             background-color: yellowgreen;
15         }
16         p#p2{
17             background-color: aquamarine;
18         }
19         *{
20             font-size: 50px;
21         }
22         p{
23             font-size: 10px;
24         }
25         /*
26         当使用不同的选择器,选中同一个元素时并且设置相同的样式时,
27         这时样式之间产生了冲突,由选择器的优先级(权重)决定,
28         优先级高的优先显示
29         1.优先级的规则
30         内联样式   优先级 1000  <p style="background-color: aqua;">
31         id选择器   优先级 100   id="p2"
32         类和伪类   优先级 10    .p1
33         元素选择器 优先级 1      p
34         通配*      优先级 0     *     比继承优先级要高
35         
36         2.当选择器中包含多种选择器时,需要将多种选择器的优先级相加后再比较
37         但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级的一样
38         则使用靠后的样式
39         
40         3.并集选择器的优先级是单独计算
41         div p #p1 hello{}
42         
43         4.可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级
44         将会优先于所有的样式显示,甚至超过内联样式,但是在开发中避免使用!important,不方便后期维护
45         */
46        </style>
47     </head>
48     <body>
49         <p id="p2" class="p1" style="background-color: aqua;">123</p>
50         <p id="p2" class="p1">123</p>
51         <p class="p1">123</p>
52         <p>
53             <div>
54                 123
55             </div>
56         </p>
57     </body>
58 </html>

 3.伪类的优先级

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7         a:link{
 8             color: aqua;
 9         }
10         a:visited{
11             color: cadetblue;
12         }
13         a:hover{
14             color: aquamarine;
15         }
16         a:active{
17             color: blanchedalmond;
18         }
19         /*
20         涉及到a的伪类一共有四个:
21         :link
22         :visited
23         :hover
24         :active
25         而这四个选择器的优先级是一样的
26         写在下面的可以把写在上面的覆盖掉
27         */
28        </style>
29     </head>
30     <body>
31         <a href="http://www.baidu.com.cn">访问过的链接</a>
32         <br />
33         <a href="http://ww.baidu.com.cn">未访问过的链接</a>
34     </body>
35 </html>

 

posted @ 2019-07-10 13:02  zuiaimiusi  阅读(512)  评论(0编辑  收藏  举报