如何理解CSS編寫中的屬性優(yōu)先級
今天就跟大家聊聊有關如何理解CSS編寫中的屬性優(yōu)先級，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)建站-專業(yè)網站定制、快速模板網站建設、高性價比岳池網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式岳池網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋岳池地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。
當你將一個樣式添加到元素上卻發(fā)現(xiàn)不起作用時，那就是遇到優(yōu)先級問題了。那么應該如何處理 CSS 優(yōu)先級問題呢，下面是一些解決 CSS 優(yōu)先級問題的常用法則。
樣式距離
我們可以通過使用外部樣式、內部樣式、內聯(lián)樣式等方法給元素添加指定的樣式，此時的優(yōu)先級是:
外部樣式 < 內部樣式 < 內聯(lián)樣式
這個應該比較容易理解，也就是說離元素距離越近的樣式優(yōu)先級越大。如：
CSS Code復制內容到剪貼板
div{color:blue;} //內部樣式
//外部樣式(color:green)
my color
//內聯(lián)樣式
此時顯示的優(yōu)先級是 red > blue > green。所以 my color 顯示為紅色。
特殊的計算方法
假設有下面這段代碼：
CSS Code復制內容到剪貼板
div p.classSelector {color: blue}
#idselector p {color: red}
my color
我們面對下面的 css，如何判斷優(yōu)先級呢？
CSS Code復制內容到剪貼板
div p.classSelector {color: blue}
#idselector p {color: red}
這里介紹一種特殊的計算方法：
元素, 偽元素: 1 – (0,0,0,1)
類, 偽類, 屬性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
內聯(lián)樣式: 1 – (1,0,0,0)
這里的屬性指的是：
效果如下：
優(yōu)先級從上往下依次增加，至于如何計算，同樣舉例說明：
p: 1個元素– (0,0,0,1)
div: 1個元素 – (0,0,0,1)
#idSelector: 1個ID – (0,1,0,0)
div#idSelector: 1個元素, 1個ID – (0,1,0,1)
div#idSelector p: 2個元素, 1個ID– (0,1,0,2)
div#idSelector p.classSelector: 2個元素, 1個類, 1個ID – (0,1,1,2)
所以現(xiàn)在我們再來看上面的例子：
CSS Code復制內容到剪貼板
div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
#idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)由于優(yōu)先級上 (0,1,0,1) > (0,0,1,2)，所以我們知道最后顯示的顏色為紅色。
繼承
繼承是個比較好理解的概念，即子元素會繼承父元素的樣式。例如：
CSS Code復制內容到剪貼板
my color
看完上述內容，你們對如何理解CSS編寫中的屬性優(yōu)先級有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
重慶分公司
重慶分公司
