瞭解CSS中的樣式優先權：css樣式優先權順序的講解

這篇文章跟大家介紹的是css樣式優先級，帶大家深入理解css樣式優先權的順序。

您是否曾經嘗試過嘗試將css樣式套用到元素的情況，但卻沒有效果？頁面似乎忽略了你定義的CSS，但你可能無法弄清楚原因。也許你會讓！ important或添加內聯樣式作為最後的實現手段。但實際上你遇到的問題很可能是css優先順序之一。 （推薦課程：css影片教學）

更好地理解哪些css樣式優先使用可以更清晰更有組織的來寫css程式碼，所以讓我們看看控制給定html元素的三個css規則：

css優先權計算

#css繼承

css層次

學習這些規則將使您的CSS開發更上一層樓。

優先計算

想像一下，你的html包含一個應用了一類「生物」的段落。您還有以下兩個css規則：

p { font-size ：12px }
p.bio { font-size ：14px }

你希望段落中的文字大小是12px還是14px？在這種情況下你可以猜測它將是14px。 css（p.bio）的第二行比你的class =「bio」段更具體。然而，有時優先順序並不容易看到。

例如，考慮以下html和css

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

乍一看，第一行css可能看起來更具體，但實際上上面的第二行更符合段落的字體大小。這是為什麼？

要回答這個問題，我們需要考慮優先順序規則。

透過計算css的各種成分並以（a，b，c，d）形式表達它們來計算特異性。這將通過一個例子更清楚，但首先是組件。

元素，偽元素：d = 1 - （0,0,0,1）

類，偽類，屬性：c = 1 - （0,0,1,0）

Id：b = 1 - （0,1,0,0）

內聯樣式：a = 1 - （1,0,0,0）

id比類別更具體而不是元素。

您可以透過計算上述每一項並將a，b，c或d加1來計算優先順序。同樣重要的是要注意0,0,1,0比0,0,0,15更具體。讓我們來看一些例子來使計算更清晰。

p：1個元素- （0,0,0,1）

div：1個元素- （0,0,0,1）

#sidebar ：1個id - （0,1,0,0）

div＃sidebar：1個元素，1個id - （0,1,0,1）

div＃sidebar p：2個元素，1個id - （0,1,0,2）

div＃sidebar p.bio:2個元素，1個類，1個id - （0,1,1 ,2）

讓我們再看一下上面的例子

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

第二個有更高的優先級，因此優先。

在我們前進之前的最後一點。重要性勝過優先級，當你使用！ important標記css屬性時，你會覆寫優先權規則等等

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

表示上面的第一行css優先於第二行而不是第二行。 ！ important仍然是圍繞基本規則的特殊性，如果您了解規則的運作方式，您應該永遠不需要。

繼承

繼承背後的想法相對容易理解。元素從其父容器繼承樣式。如果將body標籤設定為使用color：red，那麼除非另有說明，否則正文中所有元素的文字也會為紅色。

但是，並非所有css屬性都是繼承的。例如，邊距和填充是非繼承屬性。如果在div上設定邊距或填充，則div內的段落不會繼承您在div上設定的邊距和填充。該段落將使用預設的瀏覽器邊距和填充，直到您另外聲明。

但是，您可以明確設定屬性以從其父容器繼承樣式。例如，您可以宣告

p { margin ：inherit ; 填充：继承 }

然後你的段落將從它的包含元素繼承。

層疊

在最高級別，層疊是控制所有css優先權的，並且如下工作。

1、尋找適用於相關元素和屬性的所有css聲明。

2、依原點和重量排序。 Origin指的是聲明的來源（作者樣式，使用者樣式，瀏覽器預設值），權重指的是聲明的重要性。 （作者的權重大於使用者的權重大於預設值。！important比正常宣告更重要）

#3、計算優先權

4、如果上述所有規則中的兩個規則相同，那麼最後一個規則獲勝。嵌入在html中的CSS總是在外部樣式表之後，而不管html中的順序如何。

上面的＃3很可能是你最需要注意的。使用＃2只需了解您的樣式將覆蓋用戶設定瀏覽器的方式，除非他們將規則設為重要。

還要意識到您的樣式將覆蓋瀏覽器預設值，但這些預設值確實存在，並且通常會導致跨瀏覽器問題。使用重置文件，如Eric Meyer的CSS重置或Yahoo的YUI重置CSS有助於將預設樣式排除在等式之外。

總結

#

希望以上內容有助於釐清您的某些CSS優先問題。大多數情況下，如果你的風格有衝突，問題將歸結為優先順序。有時你還沒有聲明一些css，但是一個元素的行為方式你並不期望它可能從父容器或瀏覽器的預設樣式繼承了某些css。

宣告css時的一般經驗法則是宣告具有最小優先權的屬性來設定元素的樣式。例如，使用#sidebar而不是div＃sidebar。我承認打破這個一般規則遠遠超過我應該，但透過使用所需的最小優先級，它將使您更容易透過聲明更具體的樣式來覆蓋樣式。

如果您使用最具優先級，您可能會在以後遇到問題並發現自己必須添加不必要的HTML以便能夠添加更多優先級，或者您可能會發現自己不再使用！ important或聲明內聯樣式。從最小的優先權開始，僅在需要時添加更多。

以上是瞭解CSS中的樣式優先權：css樣式優先權順序的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！