css選擇器層疊、優(yōu)先級、樣式?jīng)_突

上面是一個簡單的html案例，對于同一個元素應(yīng)用多個規(guī)則時，規(guī)則中可能包含沖突的聲明，在style樣式表中包含了三個規(guī)則集，每一個規(guī)則給它指定了不同的字體顏色。標(biāo)題不可能同時擁有三種顏色，所以最終的效果是顯示的紅色(red)。

我們提供的服務(wù)有：網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、義安ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的義安網(wǎng)站制作公司

瀏覽器如何知道并解決聲明沖突，這其中層疊指的就是這一系列規(guī)則。它決定了如何解決沖突，是css語言的基礎(chǔ)。層疊會依據(jù)三種條件解決沖突。

疊層的規(guī)則是按照這種順序來考慮的，看下圖

這些規(guī)則讓瀏覽器可以以預(yù)測的方式解決css樣式規(guī)則中的沖突。

你添加到網(wǎng)頁里的樣式表并不是瀏覽器唯一使用的樣式表，還有其他類型或來源的樣式表。你的樣式表屬于作者樣式表，除此之外還有用戶代理樣式表，即瀏覽器默認(rèn)的樣式。用戶代理樣式表優(yōu)先級低，你的樣式會覆蓋它們。

用戶代理樣式表在不同瀏覽器上稍有差異，但是大體上是在做相同的事情：為標(biāo)題 h1 到 h6 和段落 p 添加上下邊距，為列表 ol,ul 添加左側(cè)內(nèi)邊距，為鏈接添加顏色，為元素添加各種默認(rèn)字號。

瀏覽器應(yīng)用了用戶代理樣式表后才會應(yīng)用你的樣式表，即作者樣式表，你指定的聲明會覆蓋用戶代理樣式表里面的樣式，如果在html里鏈接了多個樣式表，那么它們的來源都相同，即屬于作者樣式表。

用戶代理樣式表因為設(shè)置了用戶需要的樣式，所以不會做出一些超出預(yù)期的事情，當(dāng)不喜歡默認(rèn)樣式的時候，可以在自己的樣式表里面設(shè)置別的樣式來覆蓋用戶代理樣式即可。

作為一個標(biāo)準(zhǔn)的前端打工仔，必定熟悉覆蓋代理樣式。這種做法實際上就是利用了層疊的樣式來源規(guī)則。你寫的樣式會覆蓋用戶代理樣式，因為來源不同。

樣式來源規(guī)則有一個例外，標(biāo)記為重要 !important 的聲明。該聲明就會被標(biāo)記為重要的聲明。

標(biāo)記了 !important 的聲明會被當(dāng)做更高優(yōu)先級的來源，因此總體的優(yōu)先級按照由高到低排列，如下所示：

如果無法用來源解決沖突聲明，瀏覽器會嘗試檢查它們的優(yōu)先級。理解優(yōu)先級很重要，因為作者樣式幾乎都是屬于優(yōu)先級的范圍，日常工作接觸的大部分開發(fā)樣式是來自于同源，如果不理解優(yōu)先級，寫出來的css樣式會被坑的很慘。

瀏覽器將優(yōu)先級分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。

如果HTML的style屬性寫樣式，這個聲明只會作用域當(dāng)前元素。實際上行內(nèi)元素屬于“帶作用域”的聲明，它會覆蓋任何來自樣式表或style標(biāo)簽的樣式。行內(nèi)樣式?jīng)]有選擇器，因為它們直接作用于所在的元素。

上面就是一個行內(nèi)樣式，設(shè)置了顏色color為黃色yellow。

如果你希望在樣式表中覆蓋行內(nèi)樣式的聲明，需要在樣式表中對應(yīng)標(biāo)簽下的聲明后添加 !importanta ，這樣能夠?qū)⑺嵘揭粋€更高優(yōu)先級來源。但如果行內(nèi)樣式也被標(biāo)記為 !imortant 那就無法覆蓋它了。最好不要在行內(nèi)使用 !important ，而是只在樣式表中使用 !important 。

優(yōu)先級的第二部分是由選擇器優(yōu)先級決定。比如，有兩個類名的選擇器比只有一個類名的選擇器優(yōu)先級更高。具體可以看下面的案例。

通過比較選擇器類型來決定哪個選擇器優(yōu)先值最高。

上面的樣式表中最終顯示的color顏色值為紅色(red)。

一個常用的表示優(yōu)先級的方式是用數(shù)組形式來標(biāo)記，通常用都好隔開每個數(shù)。比如“1，2，3”表示用1個id、2個類、2個標(biāo)簽組成。優(yōu)先級最高的id列為第一位，緊接著是類，最后是標(biāo)簽。

我們可以通過下面的表格來查看各種選擇器和對應(yīng)的優(yōu)先級。

現(xiàn)在，通過比較數(shù)值就能快速明確決定哪個優(yōu)先級更高。所以上面的順序是"1,0,0""0,2,0""0,1,3""0,0,4"。而優(yōu)先級低的樣式表會被優(yōu)先級高的樣式表給覆蓋。

我們?nèi)粘ｉ_發(fā)不建議某個元素的樣式表寫過長的標(biāo)簽名和類名連體。一般只要能夠區(qū)分優(yōu)先級即可。

疊層的第三步，也是最后一步，是源碼順序。如果兩個聲明的來源和優(yōu)先級相同，其中一個聲明在樣式表中出現(xiàn)較晚，或者位于頁面較晚引入的樣式表中，則該聲明勝出。

在上面方法中，選擇器優(yōu)先級相同，都是(0,1,1)，最終瀏覽器呈現(xiàn)的顏色color是灰色gray。

CSS樣式覆蓋問題

請按照下面標(biāo)準(zhǔn)執(zhí)行即可；

1.行內(nèi)樣式＞指定樣式＞通用class樣式通用未指定CLASS樣式

2.例子：

1）div style="..."aaaaaa/a這就是指定用style的行內(nèi)樣式；

2）div id="side" aaaaaa/div這就是指定id使用side樣式；

3）div class="ot"aaaaaa/div這就是指了通用的class為ot的樣式；

4）如bodytabletrth這些一開始樣式文件就定義好全程的樣式，為通用為指定的樣式；

最高就是指行內(nèi)樣式，接著就是指定ID的，然后就是CLASS，最后就是未指定通用樣式；

CSS樣式被覆蓋

請按照下面標(biāo)準(zhǔn)執(zhí)行即可；

1.行內(nèi)樣式＞指定樣式＞通用class樣式通用未指定CLASS樣式

2.例子：

1）div style="..."aaaaaa/a這就是指定用style的行內(nèi)樣式；

2）div id="side" aaaaaa/div這就是指定id使用side樣式；

3）div class="ot"aaaaaa/div這就是指了通用的class為ot的樣式；

4）如bodytabletrth這些一開始樣式文件就定義好全程的樣式，為通用為指定的樣式；

最高就是指行內(nèi)樣式，接著就是指定ID的，然后就是CLASS，最后就是未指定通用樣式；

關(guān)于CSS屬性覆蓋的問題

你先查看標(biāo)簽是否在調(diào)用css有設(shè)置樣式，如果有設(shè)置，需要改的話，就寫內(nèi)聯(lián)樣式覆蓋，內(nèi)聯(lián)樣式優(yōu)先級是最高的，，不會影響調(diào)用的css，也能達到你想要的效果。

網(wǎng)頁標(biāo)題：css覆蓋行內(nèi)樣式,css 行內(nèi)樣式
URL鏈接：http://vcdvsql.cn/article20/dsdiijo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、營銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站改版、面包屑導(dǎo)航、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)