css的继承以及层叠

 继承
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS的继承性</title>
 6     <style>
 7         .father {
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13     <!--继承：给父级设置属性,子级继承父级的一些属性 比如 color font-* text-* line-*
14     像一些盒子元素，定位元素(浮动,绝对定位,固定定位)不能继承-->
15     <div class="father" id="李靖">
16         <p>哪吒</p>
17     </div>
18 </body>
19 </html>

 权重比较
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*id=100>class=10>标签=1* 按顺序比较,先比较id,再比较类,最后比较标签,只要前面的大,后面就不比较了/
 8         /*2个id1个标签:201*/
 9         #box1 #box2 p {
10             color:red;
11         }
12         /*1个id 1个类 1个标签:111*/
13         #box2 .wrap3 p {
14             color:green;
15         }
16         /*1个id 3个标签:103*/
17         div div #box3 p {
18             color:yellow;
19         }
20         /*3个类 4个标签:34*/
21         div.wrap1 div.wrap2 div.wrap3 p {
22             color: blue;
23         }
24     </style>
25 </head>
26 <body>
27 
28     <div id="box1" class="wrap1">
29         <div id="box2" class="wrap2">
30             <div id="box3" class="wrap3">
31                 <p>什么颜色</p>
32             </div>
33         </div>
34     </div>
35 </body>
36 </html>

 层叠
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>层叠性</title>
 6     <style>
 7         #box {
 8             color:red;
 9         }
10         .container {
11             color:yellow;
12         }
13         /*!important 设置权重无限大,不影响继承来的属性,只影响选中的属性*/
14         p {
15             color:teal!important;
16         }
17 
18         ul {
19             color:red;
20         }
21 
22         .list {
23             color:yellow!important;
24         }
25     </style>
26 </head>
27 <body>
28     <!--层叠性:权重大的标签样式覆盖掉了权重小的标签样式,当权重相同时,以后设置的为准,但是继承来的属性权重为0.如果都是继承来的属性,就看
29     谁描述的近就显示谁的样式,都一样近,就看权重大小.
30     权重:谁的权重大,浏览器就会显示谁的属性
31     -->
32     <p id="box" class="container">
33         什么颜色
34     </p>
35 
36     <div class="list">
37         <ul>
38             <li>
39                 li标签
40             </li>
41         </ul>
42     </div>
43 </body>
44 </html>

css的继承以及层叠

猜你喜欢