CSS 的 折疊性、繼承性、優(yōu)先級(jí)（權(quán)重）
1、折疊性（Collapsing）
折疊性是指當(dāng)多個(gè)CSS屬性應(yīng)用到同一個(gè)元素上時(shí)，它們?nèi)绾蜗嗷プ饔靡源_定最終的樣式。當(dāng)不同的規(guī)則決定同一個(gè)屬性的值時(shí)，折疊性規(guī)定了哪個(gè)規(guī)則的值會(huì)被應(yīng)用。
折疊性的規(guī)則如下：
- 樣式?jīng)_突，遵循的原則是就近原則，哪個(gè)樣式離結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式
- 樣式不沖突，不會(huì)層疊
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
在這個(gè)示例中，兩個(gè)p選擇器都定義了不同的顏色屬性，一個(gè)是紅色，一個(gè)是藍(lán)色。根據(jù)折疊性規(guī)則，后面的規(guī)則會(huì)覆蓋前面的規(guī)則。因此，最終應(yīng)用到段落的顏色將是藍(lán)色。
2、繼承性（Inheritance）
繼承性是指某些CSS屬性的值能夠被其子元素繼承。當(dāng)一個(gè)元素的某個(gè)屬性沒有顯式地定義時(shí)，它將從父元素繼承該屬性的值。
-
例如，如果父元素的顏色屬性設(shè)置為紅色，子元素的顏色屬性通常也會(huì)繼承為紅色，除非在子元素上顯式地設(shè)置了不同的值。
-
并非所有的CSS屬性都具有繼承性，只有特定的屬性才會(huì)被繼承。
-
子元素可以繼承父元素的樣式（text-,front-,line-這些元素開頭的可以繼承，以及color屬性）
-
行高的繼承性
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: 20px;
}
</style>
</head>
<body>
<div class="parent">
<p>This is a paragraph with inherited font size.</p>
</div>
</body>
</html>
在上面的示例中，父元素的字體大小設(shè)置為20像素，子元素的字體大小將繼承為20像素。
3、優(yōu)先級(jí)（Specificity）
CSS中的優(yōu)先級(jí)是用于確定哪個(gè)規(guī)則將應(yīng)用到特定元素的機(jī)制。它基于不同選擇器和聲明之間的特定性和重要性。
| 選擇器 | 選擇器權(quán)重 |
|---|---|
| 繼承或者* | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器，偽類選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內(nèi)樣式 | 1,0,0,0 |
| !important | 無(wú)窮大 |
下面是CSS中優(yōu)先級(jí)的一般規(guī)則：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-550353.html
- 內(nèi)聯(lián)樣式（Inline Styles）優(yōu)先級(jí)最高：
內(nèi)聯(lián)樣式是直接寫在HTML元素的style屬性中的樣式規(guī)則。它們具有最高的優(yōu)先級(jí)，將覆蓋其他任何選擇器定義的樣式。
<p style="color: blue;">This is a paragraph with inline style.</p>
- ID選擇器（ID Selectors）優(yōu)先級(jí)第二：
ID選擇器使用HTML元素的id屬性來(lái)選擇元素，并具有較高的優(yōu)先級(jí)。
<style>
#myElement {
color: red;
}
</style>
<p id="myElement">This is a paragraph with ID selector.</p>
- 類選擇器（Class Selectors）和屬性選擇器（Attribute Selectors）優(yōu)先級(jí)第三：
類選擇器和屬性選擇器是通過類名和屬性選擇來(lái)選擇元素的，它們的優(yōu)先級(jí)相對(duì)較低。
<style>
.myClass {
color: green;
}
[type="text"] {
font-weight: bold;
}
</style>
<p class="myClass">This is a paragraph with class selector.</p>
<input type="text" value="Example" />
- 元素選擇器（Element Selectors）和偽類選擇器（Pseudo-Class Selectors）優(yōu)先級(jí)第四：
元素選擇器是基于HTML元素名稱來(lái)選擇元素的，而偽類選擇器是用于選擇元素的特定狀態(tài)或位置。
<style>
p {
font-size: 18px;
}
a:hover {
color: orange;
}
</style>
<p>This is a paragraph with element selector.</p>
<a href="#" class="myLink">Link</a>
- 通用選擇器（Universal Selector）和偽元素選擇器（Pseudo-Element Selectors）優(yōu)先級(jí)最低：
通用選擇器選擇所有元素，而偽元素選擇器用于選擇元素的特定部分。
<style>
* {
margin: 0;
padding: 0;
}
p::first-line {
text-transform: uppercase;
}
</style>
<p>This is a paragraph with universal selector.</p>
注意：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-550353.html
- 權(quán)重是有4組數(shù)字組成，但是不會(huì)有進(jìn)位
- 等級(jí)判斷從左向右，如果某一為數(shù)值相同，則判斷下一位數(shù)值
- 繼承的權(quán)重為0，如果該元素沒有直接選中，不管父元素權(quán)重多高，子元素得到的權(quán)重都是0
-
權(quán)重疊加，如果是復(fù)合選擇器，則會(huì)有權(quán)重疊加，需要計(jì)算權(quán)重（相加）。但是不會(huì)有進(jìn)位
- div ul li ----> 0,0,0,3
- .nav ul li ----> 0.0.1.2
到了這里，關(guān)于CSS 的 折疊性、繼承性、優(yōu)先級(jí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
