css原理：1.優先原則=>後解析的內容會覆蓋之前解析的內容（所謂解析就是讀取的css樣式）2.繼承原則=>嵌套裡面的標簽擁有外部標簽的某些樣式，子元素可以繼承父元素的屬性 1》優先原則針對選擇器：a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先順序，... ...
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 class="box1" id="box2">我想起那天下午在夕陽下的奔跑,那是我逝去的青春</div> --> 29 <div style="color: skyblue;">我想起那天下午在夕陽下的奔跑,那是我逝去的青春</div> 30 </body> 31 </html>
