继承
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>