學習web前端必須瞭解的幾組CSS樣式覆蓋規則

時間 2019-12-07

標籤學習 web 前端必須瞭解幾組 css 樣式覆蓋規則欄目 HTML 简体版

原文原文鏈接

CSS樣式覆蓋規則html

不少狀況都會致使一個元素被運用上多種樣式，樣式覆蓋的規則也須要根據不一樣的狀況來定，具體規則以下。規則一：因爲繼承而發生樣式衝突時，最近祖先獲勝。CSS的繼承機制使得元素能夠從包含它的祖先元素中繼承樣式，考慮下面這種狀況：3d

<html>htm

<head>blog

<title>rule1</title> 繼承

<style>it

body {color:black;} p {color:blue;} class

</style> email

</head>import

<body>im

<p>welcome to <strong>加粗</strong></p>

</body>

</html>strong分別從body和p中繼承了color屬性，可是因爲p在繼承樹上離strong更近，所以strong中的文字最終繼承p的藍色。

規則二：繼承的樣式和直接指定的樣式衝突時，直接指定的樣式獲勝。在上面的例子中，假如還指定了strong元素的樣式，如：

strong {color:red;}那麼根據規則二，strong中的文字最終顯示爲紅色。

規則三：直接指定的樣式發生衝突時，樣式權值高者獲勝。樣式的權值取決於樣式的選擇器，權值定義以下表。CSS選擇器權值標籤選擇器 1僞元素(:first-child等) 1類選擇器 10ID選擇器 100內聯樣式 1000僞類(:link等) 10能夠看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器，除此之外，後代選擇器的權值爲每項權值之和，好比"#nav .current a"的權值爲100 + 10 + 1 = 111。

規則四：樣式權值相同時，後者獲勝。考慮下面這種狀況

<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;}".byline a"與"p .email"都直接指定了上面的a元素，且權值都爲11，根據規則四，最終顯示藍色。因爲樣式表能夠是外部的，也能夠是內部的，規則四提醒咱們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內部樣式表的出現位置。通常來講，內部樣式表出如今全部外部樣式表的引入以後，通常是在</head>以前。

規則五：!important的樣式屬性不被覆蓋。!important能夠看作是萬不得已的時候，打破上述四個規則的"金手指"。若是你必定要採用某個樣式屬性，而不讓它被覆蓋的，能夠在屬性值後加上!important，以規則四的例子爲例，

.byline a {color:red !important;}

能夠強行使連接顯示紅色。大多數狀況下均可以經過其餘方式來控制樣式的覆蓋，不能濫用!important。