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

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

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

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

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

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

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

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

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

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

作為一個(gè)標(biāo)準(zhǔn)的前端打工仔，必定熟悉覆蓋代理樣式。這種做法實(shí)際上就是利用了層疊的樣式來源規(guī)則。你寫的樣式會(huì)覆蓋用戶代理樣式，因?yàn)閬碓床煌?/p>

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

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

如果無法用來源解決沖突聲明，瀏覽器會(huì)嘗試檢查它們的優(yōu)先級(jí)。理解優(yōu)先級(jí)很重要，因?yàn)樽髡邩邮綆缀醵际菍儆趦?yōu)先級(jí)的范圍，日常工作接觸的大部分開發(fā)樣式是來自于同源，如果不理解優(yōu)先級(jí)，寫出來的css樣式會(huì)被坑的很慘。

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

如果HTML的style屬性寫樣式，這個(gè)聲明只會(huì)作用域當(dāng)前元素。實(shí)際上行內(nèi)元素屬于“帶作用域”的聲明，它會(huì)覆蓋任何來自樣式表或style標(biāo)簽的樣式。行內(nèi)樣式?jīng)]有選擇器，因?yàn)樗鼈冎苯幼饔糜谒诘脑亍?/p>

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

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

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

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

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

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

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

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

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

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

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

CSS樣式覆蓋問題

請(qǐng)按照下面標(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樣式被覆蓋

請(qǐng)按照下面標(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)先級(jí)是最高的，，不會(huì)影響調(diào)用的css，也能達(dá)到你想要的效果。

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

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

廣告

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