css的繼承以及層疊
阿新 • • 發佈：2018-11-27
設置 絕對定位 但是 import ext clas 影響 css color
繼承
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的繼承以及層疊