css選擇器

時間 2019-11-06

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

style屬性

用法：css

<標籤名 style="規則:規制值;..." > ... </標籤名>瀏覽器

例如：spa

<p style="font:12px 宋體;color:green;text-indent:2em;">段落文字1 </p>
<p style="font:12px 宋體;color:green;text-indent:2em;">段落文字2 </p>
<p style="font:12px 宋體;color:green;text-indent:2em;">段落文字3 </p>

style標籤

在上面的例子中，三個p標籤的style屬性是冗餘的，能夠用一個style標籤標示，例如：code

<head>
<style type="text/css">
p { font:12px 宋體;color:green;text-indent:2em; }
</style>
</head>
<body>
<p>段落文字1 </p>
<p>段落文字2 </p>
<p>段落文字3 </p>
</body>

這裏用到了標籤選擇器的語法規則：標籤名 { 樣式規則 }blog

還支持類選擇器：.類名 { 樣式規則 }排序

以及ID選擇器：#id { 樣式規則 }繼承

例如：input

<style type="text/css">
.class1 { font:bold 16px 宋體;background:blue; color:yellow;}
#div1 { background:green; text-decoration:underline; }
</style>

...

<div class="class1">內容1</div>
<div id="div1" class="class1">內容2</div>
<div class="class1">內容3</div>

優先級

當不一樣選擇器的樣式設置有衝突時，會選擇權重高的選擇器設置樣式。it

選擇器的優先級順序：io

ID選擇器 > class選擇器 > 標籤選擇器
行間樣式 > 內聯樣式 > 外聯樣式

css繼承是從一個元素向其後代元素傳遞屬性值所採用的機制。肯定應當向一個元素應用哪些值時，瀏覽器不只要考慮繼承，還要考慮聲明的特殊性，另外須要考慮聲明自己的來源。這個過程就稱爲層疊。——《css權威指南》

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

ID選擇器的特殊性值，加0,1,0,0。
類選擇器、屬性選擇器或僞類，加0,0,1,0。
元素和僞元素，加0,0,0,1。
通配選擇器*對特殊性沒有貢獻，即0,0,0,0。
最後比較特殊的一個標誌!important（權重），它沒有特殊性值，但它的優先級是最高的，爲了方便記憶，能夠認爲它的特殊性值爲1,0,0,0,0。

例如：

a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/

demo：

<a href="">第一條應該是黃色</a> <!--適用第1行規則-->
<div class="demo">
    <input type="text" value="第二條應該是藍色" /><!--適用第四、5行規則，第4行優先級高-->
    <a href="">第三條應該是黑色</a><!--適用第二、3行規則，第3行優先級高-->
</div>
<div id="demo">
    <a href="">第四條應該是紅色</a><!--適用第六、7行規則，第7行優先級高-->
</div>

分析上面的demo，要注意特殊性是怎麼排序的，上面第4行和第5行規則，第4行之因此優先級比第5行高，是由於第四行特殊性值最後面是1，而第5行特殊性值最後面是0。回過頭來回答文章最開始的問題，爲何ID選擇器的優先級比類選擇器的優先級高？其實是由於選擇器特殊性值是從左向右排序的，特殊性值1,0,0,0大於以0開頭的全部特殊性值，即使它是0,99,99,99，優先級依然比1,0,0,0要低。

前面有講到通配選擇器*的特殊性值是0,0,0,0，而元素經過父元素繼承過來的樣式是沒有特殊性值的，因此，通配選擇器定義的規則優先級高於元素繼承過來的規則的優先級。

細心的同窗應該已經發現了，特殊性值中的4個0中的第一個0是給誰暗箱操做內定了嗎？是的！DOM中的行間樣式送了點紅包，因而它就牛了。行間樣式的特殊性是1,0,0,0。行間樣式的優先級比ID選擇器優先級高。

層疊

假如特殊性相同的兩條規則應用到同一個元素會怎樣？css會先查看規則的權重（!important），加了權重的優先級最高，當權重相同的時候，會比較規則的特殊性，根據前面的優先級計算規則決定哪條規則起做用，當特殊性值也同樣的時候，css規則會按順序排序，後聲明的規則優先級高，成爲人生贏家，當上總經理出任CEO迎娶白富美。

咱們知道a標籤有四種狀態：連接訪問前、連接訪問後、鼠標滑過、激活，分別對應四種僞類:link、:visited、:hover、:active，而且這四個僞類若是對同一個元素設置同一個屬性，那它們的聲明順序還有必定要求，通常你們都遵循「愛恨原則LVHA」（LoVe HAte），爲何是這個順序？不能是其它順序嗎？

根據css優先級計算規則，僞類的特殊性值是0,0,1,0，4個僞類的特殊性值相同，那麼後面聲明的規則優先級高。當鼠標滑過a連接時，知足:link和:hover兩個僞類，要改變a標籤的顏色，就必須將:hover僞類在:link僞類後面聲明；同理，當鼠標點擊激活a連接時，同時知足:link、:hover、:active三種狀態，要顯示a標籤激活時的樣式（:active），必須將:active聲明放到:link和:hover以後。所以得出LVHA這個順序。這個順序能不能變？能夠，但也只有:link和:visited能夠交換位置，由於一個連接要麼訪問過要麼沒訪問過，不可能同時知足，也就不存在覆蓋的問題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。