【WEB前端】CSS繼承性和層疊性（極度重要）

1.1 繼承性

有一些屬性，當給自己設置的時候，自己的后代都繼承上了，這個就是繼承性。

哪些屬性能繼承？

color、 text-開頭的、line-開頭的、font-開頭的。

這些關於文字樣式的，都能夠繼承； 所有關於盒子的、定位的、布局的屬性都不能繼承。

所以，如果我們的頁面的文字，都是灰色，都是14px。那么就可以利用繼承性：

1    body{
2        color:gray;
3        font-size:14px;4    }

繼承性是從自己開始，直到最小的元素。

1.2 層疊性

CSS異常沖突處理能力---層疊性。

層疊性：就是css處理沖突的能力。 所有的權重計算，沒有任何兼容問題！

CSS像藝術家一樣優雅，像工程師一樣嚴謹。

當選擇器，選擇上了某個元素的時候，那么要這么統計權重：

id的數量，類的數量，標簽的數量

如果權重一樣，那么以后出現的為准：

如果不能直接選中某個元素，通過繼承性影響的話，那么權重是0。

如果大家都是0，那么有一個就近原則：誰描述的近，聽誰的。

1.3 同一個標簽，攜帶了多個類名，有沖突：

1        <p class="spec1 spec2">我是什么顏色？</p>
2        <p class="spec2 spec1">我是什么顏色？</p>

和在標簽中的掛類名的書序無關，只和css的順序有關：

1            .spec2{
2                color:blue;
3            }
4            .spec1{
5                color:red;
6            }
7        </style>

1.4 !important標記

1        <style type="text/css">
2            p{
3                color:red !important;
4            }
5            #para1{
6                color:blue;
7            }
8            .spec{
9                color:green;
10            }
11        </style>

mportant是英語里面的“重要的”的意思。我們可以通過語法：

1           k:v !important;

來給一個屬性提高權重。這個屬性的權重就是無窮大。

!important需要強調3點：

1） !important提升的是一個屬性，而不是一個選擇器

1            p{
2                color:red !important;   → 只寫了這一個!important，所以就字體顏色屬性提升權重
3                font-size: 100px ;      → 這條屬性沒有寫!important，所以沒有提升權重
4            }
5            #para1{
6                color:blue;
7                font-size: 50px;
8            }
9            .spec{
10                color:green;
11                font-size: 20px;
12            }

2） !important無法提升繼承的權重，該是0還是0

        <div>
            <p>哈哈哈哈哈哈哈哈</p>
        </div>

1          div{
2                color:red !important;
3            }
4            p{
5                color:blue;
6            }

由於div是通過繼承性來影響文字顏色的，所以!important無法提升它的權重，權重依然是0。

干不過p標簽，因為p標簽是實實在在選中了，所以字是藍色的（以p為准）。

3）!important不影響就近原則

總結