3 CSS的三大特性-有解無憂

宣告：本人前端學習筆記的所有內容均為b站上pink老師課程的學習筆記，如果想詳細了解的可以搜索以下網址：

H5C3+移動布局：黑馬程式員pink老師前端入門視頻教程 HTML5+CSS3+移動端布局-flex布局rem布局回應式布局摹客藍湖使用-簡單有趣好玩
JavaScript系列：JavaScript基礎語法-dom/bom-es6-jQuery-資料可視化echarts-包含筆記原始碼作業黑馬程式員pink老師前端入門視頻教程（持續更新）

文章目錄

- CSS的三大特性
- - 1.1 層疊性
  - 1.2 繼承性
  - 1.3 行高的繼承
  - 1.4 優先級（重要）

CSS的三大特性

CSS有非常重要的三個特性：層疊性、繼承性、優先級，

1.1 層疊性

相同選擇器給設定相同的樣式，此時一個樣式就會覆寫（層疊）另一個沖突的樣式，層疊性主要解決樣式沖突的問題，

層疊性原則：

樣式沖突：遵循就近原則，那個樣式離結構近，就執行哪個樣式
樣式不沖突，不會出現層疊問題

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BQ9OtYkt-1619010259717)(C:\Users\lp\AppData\Roaming\Typora\typora-user-images\image-20210421194016224.png)]$

1.2 繼承性

CSS中的繼承：子標簽會繼承父標簽的某些樣式，如文本顏色和字號等

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XB7wNPKn-1619010259718)(C:\Users\lp\AppData\Roaming\Typora\typora-user-images\image-20210421194414595.png)]$

子元素可以繼承父元素的樣式（text-, font-, line- 這些元素開頭的都可以繼承，以及color屬性）

1.3 行高的繼承

body {
    font: 12px/1.5  /* 字體大小12px，行高1.5 */
}
div {
    font-size: 16px; /*div為body的子元素，則行高為16*1.5=24px */
}

<body>
	<div>粉紅色的回憶</div>
	<p>我沒有指定文字大小</p> /* p沒有指定文字大小，則會繼承父親的文字大小，即12px，行高為12px*1.5 =18 */ 
</body>

行高可以跟單位，也可以不跟單位
如果子元素沒有設定行高，則會繼承父元素的行高1.5，此時子元素的行高為：當前子元素的文字大小*1.5
這樣寫法的最大好處是里面的子元素可以根據自己的文字大小自動調整行高

1.4 優先級（重要）

當同一個元素指定多個選擇器，就會有優先級的產生

如果選擇器相同，則執行層疊性
如果選擇器不同，則根據選擇器權重執行（范圍越小，權重越大）

選擇器	選擇器權重
繼承或者*	0,0,0,0
元素選擇器	0,0,0,1
類選擇器、偽類選擇器	0,0,1,0
ID選擇器	0,1,0,0
行內樣式 style=“ ”	1,0,0,0
！important 重要的	無窮大

優先級注意點

權重是由四組數字組成的，但是不會有進位
可以理解為類選擇器永遠大于元素選擇器，id選擇器永遠大于類選擇器，以此類推
等級判斷從左向右，如果某一位相同，則判斷下一位，可以簡單記憶：通配符和繼承權重為0，標簽選擇器為1，類（偽類）選擇器為10，id選擇器為100，行內樣式表為1000，！important為無窮大，

繼承的權重為0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0；（如下例中，不管father權重多高，p還是為粉色）

<style>
    #father {
        color: red; /* 父親的權重為100 */
    }
    p {
        color: pink;  /* p繼承的權重為0 */
    }
</style>

<body>
	<div id='father'>
		<p>你很好看</p>
	</div>
</body>

a鏈接比較特殊，他不會繼承body父類的顏色，而是使用默認的藍色，需要單獨指定來修改樣式

<style>
    body {
        color: red; 
    }
    a {
        color: pink;  /* a鏈接瀏覽器默認制定了一個樣式 藍色的 有下劃線的，所以不會繼承父類的，需要單獨制定來進行修改 */
    }
</style>

<body>
	<a href="#">我是單獨的樣式</a>
</body>

權重疊加：如果是復合選擇器，則會有權重疊加，需要計算權重，（權重雖然有疊加，但是永遠不會有進位）

<style>
    ul li {   /* 權重為 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
        color: red; 
    }
    li {
        color: green;  /* 權重為 0,0,0,1 */
    }
    .nav li {
        color:pink;  /* 權重為 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
    }
</style>

<body>
	<ul class='nav'>
		<li>大豬蹄子</li>
	</ul>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/279311.html

標籤：區塊鏈

上一篇：docker、docker-compse在線離線安裝-小白實操記錄

下一篇：安裝Ubnutu18.04圖形化界面