一泌辫、CSS選擇器
關(guān)于CSS選擇器勇劣，首先請(qǐng)看這里：CSS 選擇器參考手冊(cè)
通過(guò)以上靖避，我們可以將CSS選擇器分為以下幾種：
<script async src="http://jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
基本選擇器
- ID選擇器（#footer），匹配所有id屬性等于footer的元素比默。
- 類(lèi)選擇器（.info）幻捏，匹配所有class屬性中包含info的元素。
- 通用選擇器（*）命咐，匹配任何元素篡九。
- 標(biāo)簽選擇器（E），匹配所有使用E標(biāo)簽的元素醋奠。
- 同級(jí)元素選擇器（E~F ）榛臼，匹配任何在E元素之后的同級(jí)F元素(CSS3)。
示例：
#footer { background: #999;}
.info { background: #000;}
* { margin: 0;padding: 0; }
div { border: 1px #000000 solid; }
p ~ ul { background: #000000; }
屬性選擇器
說(shuō)明：以下E表示元素钝域，attr表示屬性讽坏，val表示屬性的值。
-
E[attr]選擇器匹配所有具有attr屬性的E元素例证，不考慮它的值。（注：E在此處可以省略迷捧，比如“[checked]”.）
示例2：匹配所有含有title屬性的元素
看出區(qū)別了么~ 示例2就是比示例1省略了元素名div~
-
E[attr=val]匹配所有attr屬性值為val的E元素织咧。（注：同上，這里的E也可以省略漠秋。）
-
E[attr~=val]匹配具有attr屬性且屬性值用空格分隔的字符列表笙蒙。
示例：匹配具有class屬性且其中一個(gè)屬性值為name的div元素
運(yùn)行代碼，我們可以看到第一個(gè)div會(huì)應(yīng)用上面的樣式~
-
E[attr|=val]匹配具有attr屬性且屬性值為用連接符（-）分隔的字符串庆锦，并以val開(kāi)頭的E元素捅位。
示例： 匹配所有以test開(kāi)頭并以-連接的具有class屬性的div元素
運(yùn)行代碼，可以看出第二個(gè)div會(huì)應(yīng)用上面的樣式~
E[attr^="val"],屬性attr的值以"val"開(kāi)頭的元素（CSS3）搂抒。E[attr$=“val”],屬性attr的值以"val"結(jié)尾的元素（CSS3）艇搀。E[attr*="val"],屬性attr的值包含"val"字符串的元素（CSS3）。
組合選擇器
-
多元素選擇器（
E, F）求晶，同時(shí)匹配多有E元素或F元素焰雕。 -
后代選擇器（
E F），匹配所有屬于E元素后代的F元素芳杏，E和F之間用空格分隔矩屁。 -
子元素選擇器（
E > F）辟宗， 匹配所有E元素的子元素F。 -
相鄰選擇器（
E + F）吝秕，匹配所有緊隨E元素之后的同級(jí)元素F泊脐。可以發(fā)現(xiàn)，我們的樣式只對(duì)緊跟div的第一個(gè)p元素起作用~
偽類(lèi)選擇器
說(shuō)明：以下E表示元素
CSS2.1中的偽類(lèi)：
-
E:first-child, 匹配父元素的第一個(gè)元素烁峭。 -
E:link, 匹配所有未被點(diǎn)擊的鏈接. -
E:visited, 匹配所有已被點(diǎn)擊的鏈接容客。 -
E:active, 匹配鼠標(biāo)已經(jīng)將其按下，還沒(méi)釋放的E元素则剃。 -
E:hover, 匹配鼠標(biāo)懸停其上的E元素耘柱。 -
E:focus, 匹配獲得當(dāng)前焦點(diǎn)的E元素。 -
E:lang(c), 匹配lang屬性等于c的E元素棍现。
示例：
p:first-child {
font-style: italic;
}
input[type=text]:focus {
color: #000;
background: #ffe;
}
input[type=text]:focus:hover {
background: #fff;
}
q:lang(sv) {
quotes: "\201D" "\201D" "\2019" "\2019";
}
CSS2.1中的偽元素
-
E:first-line, 匹配E元素的第一行调煎。 -
E:first-letter, 匹配E元素的第一個(gè)字母。 -
E:before, 在E元素之前插入生成的內(nèi)容己肮。 -
E:after, 在E元素之后插入生成的內(nèi)容士袄。
示例：
p:first-line {
font-weight: bold;
color: #600;
}
.preamble:first-letter {
font-size: 1.5em;
font-weight: bold;
}
.cbb:before {
content: "";
display: block;
height: 17px;
width: 18px;
background: url(top.png) no-repeat 0 0;
margin: 0 0 0 -18px;
}
a:link:after {
content: " (" attr(href) ") ";
}
CSS3中與用戶(hù)界面有關(guān)的偽類(lèi)
-
E:enabled, 匹配表單中激活的元素。 -
E:disabled, 匹配表單中禁用的元素谎僻。 -
E:checked, 匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素娄柳。 -
E::selection, 匹配用戶(hù)當(dāng)前選中的元素。
示例：
input[type="text"]:disabled { background: #ddd; }
CSS3中的結(jié)構(gòu)性偽類(lèi)
-
E:root, 匹配文檔的根元素艘绍，對(duì)于HTML文檔赤拒，就是HTML元素。 -
E:nth-child(n), 匹配其父元素的第n個(gè)子元素诱鞠，第一個(gè)編號(hào)為1挎挖。 -
E:nth-last-child(n), 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1航夺。 -
E:nth-of-type(n), 與:nth-child()作用類(lèi)似蕉朵，但是僅匹配使用同種標(biāo)簽的元素。 -
E:nth-last-of-type(n), 與:nth-last-child()作用類(lèi)似阳掐，但是僅匹配使用同種標(biāo)簽的元素始衅。 -
E:last-child, 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)缭保。 -
E:first-of-type, 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素汛闸，等同于:nth-of-type(1). -
E:last-of-type, 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)涮俄。 -
E:only-child, 匹配父元素下僅有的一個(gè)子元素蛉拙，等同于:first-child:last-child或:nth-child(1):nth-last-child(1). -
E:only-of-type, 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或:nth:first-of-type(1):nth-last-of-type(1). -
E:empty, 匹配一個(gè)不包含任何子元素的元素彻亲，注意：文本節(jié)點(diǎn)也被看作子元素孕锄。
示例：
p:nth-child(3) { color: #f00; }
p:nth-child(odd) { color: #f00;}
p:nth-child(even) { color: #f00; }
p:nth-child(3n+0) { color: #f00; }
p:nth-child(3n) { color: #f00; }
tr:nth-child(2n+11) { background: #ff0; }
tr:nth-last-child(2) { background: #ff0; }
p:last-child { background: #ff0; }
p:only-child { background: #ff0; }
p:empty { background: #ff0; }
CSS3的反選偽類(lèi)
E:not(s),匹配不符合當(dāng)前選擇器的任何元素
示例：
:not(p) {
border: 1px solid #ccc;
}
CSS3中的:target偽類(lèi)
E:target,匹配文檔中特定"id"點(diǎn)擊后的效果
示例：
h2:target {
color: white;
background: #f60;
}
后代元素選擇器和子元素選擇器的區(qū)別
這里我們簡(jiǎn)單討論下后代元素選擇器和子元素選擇器的區(qū)別
-
寫(xiě)法不一樣：
后代元素選擇器標(biāo)識(shí)：空格
如：
ul li{ width:150px; },ul和li之間用空格隔開(kāi)子元素選擇器標(biāo)識(shí)：>
如：
ul>li{ width:150px; },ul和li之間用>隔開(kāi) -
功能不一樣
接著上例來(lái)說(shuō):后代選擇器是選擇ul包圍的,所以元素中的所有l(wèi)i元素吮廉，包括子元素、孫元素畸肆、曾孫元素等等等宦芦。
子選擇器僅僅選擇ul包圍的 子元素中的 li元素，不包括孫元素轴脐、曾孫元素等等等调卑。
-
兼容性不一樣：
后代選擇器是所有瀏覽器都兼容的，都可使用大咱。
子選擇器在IE6恬涧、IE7、IE8中則是不被支持的選擇器碴巾，各自bug溯捆！
二、CSS優(yōu)先級(jí)
什么是CSS優(yōu)先級(jí)厦瓢？
CSS優(yōu)先級(jí)是指CSS樣式在瀏覽器中被解析的先后順序提揍。
樣式的優(yōu)先級(jí)
多重樣式（Mutiple Styles）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素煮仇，就是多重樣式的使用情況劳跃。
一般情況下，（外部樣式）External style sheet <（內(nèi)部樣式）Internal style sheet <（內(nèi)聯(lián)樣式）Inline style
例外：如果外部樣式放在內(nèi)部樣式的后面浙垫，則外部樣式將會(huì)覆蓋內(nèi)部樣式刨仑。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/* 內(nèi)部樣式 */
h3{color:green;}
</style>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設(shè)置：h3{color:blue;} -->
</head>
<body>
<h3>測(cè)試！</h3>
</body>
</html>
選擇器的優(yōu)先級(jí)
給不同的選擇器分配不同的權(quán)值
| 選擇器 | 內(nèi)聯(lián)樣式（style=""） | id選擇器 | 類(lèi)選擇器/屬性選擇器/偽類(lèi)選擇器 | 標(biāo)簽選擇器 |
|---|---|---|---|---|
| 權(quán)重 | 1000 | 100 | 10 | 1 |
解釋?zhuān)?/p>
- 內(nèi)聯(lián)樣式表的權(quán)值最高1000;
- id選擇器權(quán)值100;
- 類(lèi)選擇器/屬性選擇器/偽類(lèi)選擇器權(quán)值10;
- HTML標(biāo)簽選擇器權(quán)值為1.
示例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍(lán)色 */
}
#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
結(jié)果：標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色夹姥。
CSS優(yōu)先級(jí)法則
比較樣式的優(yōu)先級(jí)是贸人，只需統(tǒng)計(jì)不同選擇器的個(gè)數(shù)，然后與對(duì)應(yīng)的權(quán)值相乘即可佃声。根據(jù)結(jié)果便可得出優(yōu)先級(jí)。
- 結(jié)果較大的優(yōu)先級(jí)較高倘要；
- 結(jié)果相同圾亏，則
后定義的優(yōu)先級(jí)較高 - 創(chuàng)作者的優(yōu)先級(jí)高于瀏覽者，網(wǎng)頁(yè)編寫(xiě)者設(shè)置的CSS樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式封拧。
- 繼承的CSS樣式優(yōu)先級(jí)低于后來(lái)指定的CSS樣式
- 若樣式值中含有
!important志鹃，則該值優(yōu)先級(jí)最高
看到這里，有些同學(xué)是不是對(duì)!important有點(diǎn)迷惑呀為什么有了它泽西，就優(yōu)先級(jí)最高吶下面我們?cè)賮?lái)詳細(xì)講一講!important~
三曹铃、!important知識(shí)點(diǎn)
!important簡(jiǎn)介
!important 是CSS1就定義的語(yǔ)法，作用是提高指定樣式的應(yīng)用優(yōu)先權(quán)捧杉。
語(yǔ)法格式：{cssRule !important}陕见，即寫(xiě)在定義的最后面秘血，例如：box { color: red !important}
聲明了!important的樣式，具有最高的優(yōu)先級(jí)评甜，相當(dāng)于寫(xiě)在最下面（最后定義）
IE 6.0下的!important
IE 6.0不完全支持!important
IE支持重定義中的!important灰粮，例如：
.yuanxin { color:#e00 !important; }
.yuanxin { color:#000; }
你將會(huì)發(fā)現(xiàn)定義了樣式class="yuanxin"時(shí)，在IE下忍坷，字體顯示為紅色（#e00）粘舟。
但不支持同一定義中的!important。例如：
.yuanxin { color: #e00 !important; color: #000; }
此時(shí)在IE6下不支持佩研，你將會(huì)發(fā)現(xiàn)定義了樣式class="yuanxin"時(shí)柑肴，字體顯示為黑色（#000）。
解釋：
important的樣式屬性和覆蓋它的樣式屬性單獨(dú)使用時(shí)(不在一個(gè){}里)旬薯，IE 6.0認(rèn)為!important優(yōu)先級(jí)較高晰骑，否則當(dāng)含!important的樣式屬性被同一個(gè){}里的樣式覆蓋時(shí)，IE 6.0認(rèn)為!important較低!
再舉一個(gè)例子：
/*樣式1*/
#a{width:100 !important;} /*有效*/
#a{width:50px;} /*無(wú)效*/
/*樣式2*/
#a{width:100px !important; width:50px;} /*width:100px無(wú)效袍暴，width:50px 有效*/
因?yàn)镮E 6.0一直都不完全支持這個(gè)語(yǔ)法些侍，而其他的瀏覽器都支持。因此我們就可以利用這一點(diǎn)來(lái)分別利用!important政模，我們可以針對(duì)IE和非IE瀏覽器設(shè)置不同的樣式岗宣，只要在非IE瀏覽器樣式的后面加上!important。
完淋样。
總結(jié)內(nèi)容參考以下：
w3school_CSS 選擇器參考手冊(cè)
阮一峰_CSS選擇器筆記
css選擇器優(yōu)先級(jí)深入理解
CSS 的優(yōu)先級(jí)機(jī)制[總結(jié)]
十分感謝你們的分享n(*≧▽≦*)n
注：原文章首發(fā)于：CSS選擇器耗式、優(yōu)先級(jí)以及!important知識(shí)總結(jié)，現(xiàn)遷移至此趁猴。
<script async src="http://jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
