css原理：1.優先原則=>后決議的內容會覆寫之前決議的內容（所謂決議就是讀取的css樣式）2.繼承原則=>嵌套里面的標簽擁有外部標簽的某些樣式，子元素可以繼承父元素的屬性
1》優先原則針對選擇器：a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同型別的選擇器優先級，先執行低優先級再執行高優先級，比方基本選擇器就是從*通配符<標簽div<class選擇器<id選擇器 d.外部樣式與內部樣式合并之后再一起執行，根據從上往下執行順序讀取 e.行內樣式也就是行內樣式是最后執行的 f.加了！important欄位是最后執行的
2》繼承原則：2.1跟文字樣式相關的可以被繼承/其他的不能繼承 2.2塊級元素的寬度如果不設定會繼承父元素的寬度，高度取決于它的內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css的核心原理分為優先級原則與繼承原則兩大部分</title> 7 <!-- 優先原則針對選擇器：a.同一個選擇器從上往下讀取執行css樣式 8 b.同一類選擇器從上往下執行 c.不同型別的選擇器優先級，先執行低優先級再執行高優先級，比方基本選擇器就是從*通配符<標簽div<class選擇器<id選擇器 9 d.外部樣式與內部樣式合并之后再一起執行，根據從上往下執行順序讀取 e.行內樣式也就是行內樣式是最后執行的 f.加了！important欄位是最后執行的 --> 10 <style type="text/css"> 11 div{ 12 /* color:#f90; */ 13 color:#f90 !important; 14 } 15 /* div{ 16 color:red; 17 } 18 .box1{ 19 color: yellowgreen; 20 } 21 #box2{ 22 color: violet; 23 } */ 24 </style> 25 <link rel="stylesheet" href="demo2.css"><!--新建demo2.css,檔案內容div{color: blue;}--> 26 </head> 27 <body> 28 <!-- <div id="box2">我想起那天下午在夕陽下的奔跑,那是我逝去的青春</div> --> 29 <div style="color: skyblue;">我想起那天下午在夕陽下的奔跑,那是我逝去的青春</div> 30 </body> 31 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73728.html
標籤：Html/Css