国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS優先級詳解

n7then / 3045人閱讀

摘要:優先級是由選擇器組成的匹配規則決定的。這些繼承的樣式的優先級永遠低于元素本身的樣式,包括通用選擇器最終的顏色是紅色的。永遠都要優先考慮使用樣式規則的優先級來解決問題而不是。

概念

瀏覽器是通過判斷優先級,來決定到底哪些屬性值是與元素最相關的,從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。

如何計算?

優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對應相應匹配表達式的權重值.

如果優先級相同,元素最終會應用 CSS 中靠后的聲明.

注意: 在文檔樹中的距離是不會對元素優先級計算產生影響的.(可以看文檔中無視DOM樹中的距離的例子)

優先級順序

下列是一份優先級逐級增加的選擇器列表:

通用選擇器*

元素(類型)選擇器

類選擇器

屬性選擇器

偽類

ID 選擇器

內聯樣式

事實上,元素還可以從父元素上繼承一些樣式,如color等屬性。這些繼承的樣式的優先級永遠低于元素本身的樣式,包括通用選擇器:


* {
    color:red;
}

#test{
    color:blue; 
}

最終text的顏色是紅色的。

? !important?規則是例外

!important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 盡管如此, !important規則還是與優先級毫無關系使用!important不是一個好習慣,因為它改變了你樣式表本來的級聯規則,從而難以調試。

?

一些不成文規則

不要在全站范圍的css中使用!important.

只在需要覆蓋全站范圍的css或是外部css(例如引用的ExtJs或是YUI)的時候才在指定的頁面上使用?!important

不要在你的插件中使用!important

永遠都要優先考慮使用樣式規則的優先級來解決問題而不是 !important

取而代之,你可以:

更好的利用CSS的級聯屬性

更多的使用適合的選擇器。比如在你需要選定的對象元素前加上更多的元素,使選擇的范圍縮小,你的選擇器就變得更有針對性,從而提高優先級:

Text
div#test span { color: green } span { color: red } div span { color: blue }

無論你c?ss語句的順序是什么樣的,文本都會是綠色的(green)因為這一條規則是最有特殊性、優先級最高的。(同理,無論語句順序怎樣,藍色(blue)的規則都會覆蓋紅色(red)的規則)

什么時候應該使用:

A) 一種情況

你的網站上有一個設定了全站樣式的CSS文件,同時你(或是你同事)寫了一些效果通常都是很差的行內樣式(行內樣式的優先級是最高的)。

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

活生生的例子比如:有人在jQuery插件里寫了糟糕的行內樣式。

B) 另一種情況

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

在外層有?#someElement 的情況下,你怎樣能使?awesome?的段落變成紅色呢?這種情況下,如果不使用!important,第一條規則永遠比第二條的優先級更高。?

?

怎樣覆蓋掉 !important

很簡單,你只需要再加一條?!important 的CSS語句,將其應用到更高優先級的選擇器(在原有基礎上添加額外的標簽、class或id選擇器)上;或是保持選擇器一樣,但添加的位置需要在原有聲明的后面(優先級相同的情況下,后邊定義的會覆蓋前邊定義的)。


想要把原有的綠色文本變成紅色,提升優先級的方式:

#test.a{
  color: red !important;
}
a{
  color: green !important;
}

不過

a{
  color: green !important;
}
a{
  color: red !important;
}

更多關于important的帖子:

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

http://stackoverflow.com/questions/11178673/how-to-override-important

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

?

:not偽類例外

:not 否定偽類在優先級計算中不會被看作是偽類. 盡管如此, 在計算選擇器數量時還是會把偽類當做普通選擇器進行計數.

這是一塊CSS代碼:

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49481.html

相關文章

  • 詳解 CSS 屬性 - 先級問題

    摘要:當你將一個樣式添加到元素上卻發現不起作用時,那就是遇到優先級問題了。那么應該如何處理優先級問題呢,下面我總結了一些解決優先級問題的常用法則。如內部樣式外部樣式內聯樣式此時顯示的優先級是。 當你將一個樣式添加到元素上卻發現不起作用時,那就是遇到優先級問題了。那么應該如何處理 CSS 優先級問題呢,下面我總結了一些解決 CSS 優先級問題的常用法則。 樣式距離 我們可以通過使用外部樣式...

    ZoomQuiet 評論0 收藏0
  • CSS先級詳解

    摘要:優先級是由選擇器組成的匹配規則決定的。這些繼承的樣式的優先級永遠低于元素本身的樣式,包括通用選擇器最終的顏色是紅色的。永遠都要優先考慮使用樣式規則的優先級來解決問題而不是。 概念 瀏覽器是通過判斷優先級,來決定到底哪些屬性值是與元素最相關的,從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。 如何計算? 優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對...

    Juven 評論0 收藏0
  • CSS 特殊性詳解

    摘要:特殊性我們可以用很多種寫法來定位一個元素,而選擇器的特殊性值則是決定哪一個勝出的關鍵。選擇器的特殊性值其實很簡單,就是的形式。按照特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大于有較低的特殊性的元素。 之前學CSS一直沒有深入的去研究CSS選擇器的優先級,這次好好的看了下之后寫的時候特殊性值仿佛都浮現在眼前,現在寫的時候心里更加清晰,這里梳理一下學到的東西。 特殊性(...

    Lucky_Boy 評論0 收藏0
  • Webpack 配置詳解(含 4)——關注細節

    摘要:由于這種差異我們將對預處理器文件的配置封裝為函數,由參數生成對應配置,將文件放入文件內,將配置放在文件內。 前言 源代碼 熟悉 webpack 與 webpack4 配置。 webpack4 相對于 3 的最主要的區別是所謂的零配置,但是為了滿足我們的項目需求還是要自己進行配置,不過我們可以使用一些 webpack 的預設值。同時 webpack 也拆成了兩部分,webpack 和 w...

    jsbintask 評論0 收藏0
  • 詳解css媒體查詢

    摘要:媒體查詢,添加自,允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪,而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式,它只是一股腦的將所有的樣式引入。 簡介 媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

    leone 評論0 收藏0

發表評論

0條評論

n7then

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<