css樣式元素和類優先級,css四種樣式的優先級

CSS選擇器與優先級詳解（一）

CSS選擇器又被稱為CSS樣式、CSS屬性選擇器。是由css命名及后面屬性及屬性值構成一個整體。

網站制作、做網站的開發，更需要了解用戶，從用戶角度來建設網站，獲得較好的用戶體驗。創新互聯多年互聯網經驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網絡公司，打造的就是網站建設產品直銷的概念。選擇創新互聯，不只是建站，我們把建站作為產品，不斷的更新、完善，讓每位來訪用戶感受到浩方產品的價值服務。

1.基礎選擇器

a.id選擇器：通過設置元素的id屬性為該元素制定ID。ID由開發者指定。每個ID在文檔中必須是唯一的。在寫樣式表時，ID選擇器是以#開頭的。

HTML

CSS

執行效果：

b.class選擇器：是以獨立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，也就是要保證類名在html標記中存在。

HTML

CSS

執行效果：

c.元素選擇器：通過note節點名稱匹配元素。

HTML

CSS

2.屬性選擇器：

注意：最后一個選擇器是E[attr|=val]，由于輸入|會對表格造成影響，只能用/代替。

CSS3新增了一些屬性選擇器，待持續更新。

3.組合選擇器

示例如下：

實現效果如下：

示例如下：

從高到低依次是：

1.在屬性后面使用 !important會覆蓋頁面內任何位置定義的元素樣式

2.作為style屬性寫在元素標簽上的內聯樣式

3.id選擇器

4.類選擇器

5.偽類選擇器

6.屬性選擇器

7.標簽選擇器

8.通配符選擇器

9.瀏覽器自定義

選擇器的特殊性值表述為4個部分，用0,0,0,0表示。

參考：

1. css優先級計算規則

2. CSS選擇器筆記

3. Selectors MDN

4. CSS3 選擇器——基本選擇器

5. CSS3 選擇器——偽類選擇器

6. 征服高級CSS選擇器

Css中樣式的優先級

當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其他聲明。雖然，從技術上講， !important 與優先級無關，但它與最終的結果直接相關。使用 !important 是一個壞習慣，應該盡量避免，因為這破壞了樣式表中的固有的級聯規則使得調試找bug變得更加困難了。當兩條相互沖突的帶有 !important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被采用。

一些經驗法則：

什么的情況下可以使用 !important：

A) 覆蓋內聯樣式

你的網站上有一個設定了全站樣式的 CSS 文件，同時你（或是你同事）寫了一些很差的內聯樣式。

全局的CSS文件會在全局范圍內設置網站的外觀，而直接在各個元素上定義的內聯樣式可能會覆蓋您的全局CSS文件。內聯樣式和!important都被認為是非常不好的做法，但是有時你可以在CSS文件里用!important去覆蓋內聯樣式。

在這種情況下，你就可以在你全局的 CSS 文件中寫一些 !important 的樣式來覆蓋掉那些直接寫在元素上的行內樣式。

css的優先級順序是怎樣的

當創建的樣式表越來越復雜時，一個標簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優先級。

CSS 的繼承性

CSS 的繼承特性指的是應用在一個標簽上的那些 CSS 屬性被傳到其子標簽上。看下面的 HTML 結構：

div

p/p/div

如果?div?有個屬性?color: red，則這個屬性將被?p?繼承，即?p?也擁有屬性?color: red。

由上可見，當網頁比較復雜， HTML 結構嵌套較深時，一個標簽的樣式將深受其祖先標簽樣式的影響。影響的規則是：

CSS 優先規則1：?最近的祖先樣式比其他祖先樣式優先級高。

例1：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我們把一個標簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標簽直接擁有的屬性。又有如下規則：

CSS 優先規則2："直接樣式"比"祖先樣式"優先級高。

例2：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div class="son" style="color: blue"/div/div

選擇器的優先級

上面討論了一個標簽從祖先繼承來的屬性，現在討論標簽自有的屬性。在討論 CSS 優先級之前，先說說 CSS 7 種基礎的選擇器：

ID 選擇器，如 #id{}

類選擇器，如 .class{}

屬性選擇器，如 a[href="segmentfault.com"]{}

偽類選擇器，如 :hover{}

偽元素選擇器，如 ::before{}

標簽選擇器，如 span{}

通配選擇器，如 *{}

CSS 優先規則3：優先級關系：內聯樣式 ID 選擇器類選擇器 = 屬性選擇器 = 偽類選擇器標簽選擇器 = 偽元素選擇器

例3：

// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {

color: red;}.content-class {

color: blue;}div {

color: grey;}

最終的 color 為 black，因為內聯樣式比其他選擇器的優先級高。

所有 CSS 的選擇符由上述 7 種基礎的選擇器或者組合而成，組合的方式有 3 種：

后代選擇符： .father .child{}

子選擇符： .father .child{}

相鄰選擇符: .bro1 + .bro2{}

當一個標簽同時被多個選擇符選中，我們便需要確定這些選擇符的優先級。我們有如下規則：

CSS 優先規則4：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

例4：

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由規則 4 可見，span 的 color 為 red。

如果外部樣式表和內部樣式表中的樣式發生沖突會出現什么情況呢？這與樣式表在 HTML 文件中所處的位置有關。樣式被應用的位置越在下面則優先級越高，其實這仍然可以用規則 4 來解釋。

例5：

// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {

background: blue;}/stylediv/div// style-link.cssdiv {

background: lime;}// style-import.cssdiv {

background: grey;}

從順序上看，內部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。

上面代碼中，@import?語句必須出現在內部樣式之前，否則文件引入無效。當然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。

CSS 還提供了一種可以完全忽略以上規則的方法，當你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術。

CSS 優先規則5：屬性后插有?!important?的屬性擁有最高優先級。若同時插有?!important，則再利用規則 3、4 判斷優先級。

例6：

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

雖然 .father .son 擁有更高的權值，但選擇器 p 中的 background 屬性被插入了 !important，所以 p 的 background 為 red。

錯誤的說法

在學習過程中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值為 100，類選擇器權值為 10，標簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權值相加，然后再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 100，應該應用前者的樣式，然而事實是應用后者的樣式。錯誤的原因是：權重的進制是并不是十進制，CSS 權重進制在 IE6 為 256，后來擴大到了 65536，現代瀏覽器則采用更大的數量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100，你可以理解為 99.99，所以最終應用后者樣式。

19、css樣式的優先級

1、最近的祖先樣式比其他祖先樣式優先級高。

2、"直接樣式"比"祖先樣式"優先級高。

首先，我們需要知道有哪些選擇器：

1）ID 選擇器，如 #id{}

2）類選擇器，如 .class{}

3）屬性選擇器，如 a[href="segmentfault.com"]{}

4）偽類選擇器，如 :hover{}

5）偽元素選擇器，如 ::before{}

6）標簽選擇器，如 span{}

7）通配選擇器，如 *{}

3、內聯樣式 ID 選擇器類選擇器 = 屬性選擇器 = 偽類選擇器標簽選擇器 = 偽元素選擇器

4、當一個標簽同時被多個選擇符選中，我們便需要確定這些選擇符的優先級。我們有如下規則：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

5、屬性后插有?!important?的屬性擁有最高優先級。若同時插有?!important，則再利用規則 3、4 判斷優先級。

文章名稱：css樣式元素和類優先級,css四種樣式的優先級
網站鏈接：http://www.yijiale78.com/article2/dsiopoc.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、網站設計、小程序開發、做網站、品牌網站建設、響應式網站