CSS選擇器、優(yōu)先級以及!important知識總結(jié)

一、CSS選擇器

關(guān)于CSS選擇器，首先請看這里：CSS 選擇器參考手冊

通過以上，我們可以將CSS選擇器分為以下幾種：

<script async src="http://jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>

基本選擇器

  1. ID選擇器（#footer），匹配所有id屬性等于footer的元素。
  2. 類選擇器（.info），匹配所有class屬性中包含info的元素。
  3. 通用選擇器（*），匹配任何元素。
  4. 標(biāo)簽選擇器（E），匹配所有使用E標(biāo)簽的元素。
  5. 同級元素選擇器（E~F ），匹配任何在E元素之后的同級F元素(CSS3)。

示例：

#footer { background: #999;}
.info { background: #000;}
* { margin: 0;padding: 0; }
div { border: 1px #000000 solid; }
p ~ ul { background: #000000; }

屬性選擇器

說明：以下E表示元素，attr表示屬性，val表示屬性的值。

  1. E[attr]選擇器

    匹配所有具有attr屬性的E元素，不考慮它的值。（注：E在此處可以省略，比如“[checked]”.）

    示例1：匹配所有含有title屬性的div元素

    示例2：匹配所有含有title屬性的元素

    看出區(qū)別了么~ 示例2就是比示例1省略了元素名div~

  2. E[attr=val]

    匹配所有attr屬性值為val的E元素。（注：同上，這里的E也可以省略。）

    示例：匹配所有class值為test的p元素

  3. E[attr~=val]

    匹配具有attr屬性且屬性值用空格分隔的字符列表。

    示例：匹配具有class屬性且其中一個屬性值為name的div元素

    運行代碼，我們可以看到第一個div會應(yīng)用上面的樣式~

  4. E[attr|=val]

    匹配具有attr屬性且屬性值為用連接符（-）分隔的字符串，并以val開頭的E元素。

    示例： 匹配所有以test開頭并以-連接的具有class屬性的div元素

    運行代碼，可以看出第二個div會應(yīng)用上面的樣式~

  5. E[attr^="val"],屬性attr的值以"val"開頭的元素（CSS3）。

  6. E[attr$=“val”],屬性attr的值以"val"結(jié)尾的元素（CSS3）。

  7. E[attr*="val"],屬性attr的值包含"val"字符串的元素（CSS3）。

組合選擇器

  1. 多元素選擇器（E, F），同時匹配多有E元素或F元素。

    示例

  2. 后代選擇器（E F），匹配所有屬于E元素后代的F元素，E和F之間用空格分隔。

    示例

  3. 子元素選擇器（E > F）， 匹配所有E元素的子元素F。

    示例

  4. 相鄰選擇器（E + F），匹配所有緊隨E元素之后的同級元素F。

    示例

    可以發(fā)現(xiàn)，我們的樣式只對緊跟div的第一個p元素起作用~

偽類選擇器

說明：以下E表示元素

CSS2.1中的偽類：

  1. E:first-child, 匹配父元素的第一個元素。
  2. E:link, 匹配所有未被點擊的鏈接.
  3. E:visited, 匹配所有已被點擊的鏈接。
  4. E:active, 匹配鼠標(biāo)已經(jīng)將其按下，還沒釋放的E元素。
  5. E:hover, 匹配鼠標(biāo)懸停其上的E元素。
  6. E:focus, 匹配獲得當(dāng)前焦點的E元素。
  7. 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中的偽元素

  1. E:first-line, 匹配E元素的第一行。
  2. E:first-letter, 匹配E元素的第一個字母。
  3. E:before, 在E元素之前插入生成的內(nèi)容。
  4. 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中與用戶界面有關(guān)的偽類

  1. E:enabled, 匹配表單中激活的元素。
  2. E:disabled, 匹配表單中禁用的元素。
  3. E:checked, 匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素。
  4. E::selection, 匹配用戶當(dāng)前選中的元素。

示例：

input[type="text"]:disabled { background: #ddd; }

CSS3中的結(jié)構(gòu)性偽類

  1. E:root, 匹配文檔的根元素，對于HTML文檔，就是HTML元素。
  2. E:nth-child(n), 匹配其父元素的第n個子元素，第一個編號為1。
  3. E:nth-last-child(n), 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1。
  4. E:nth-of-type(n), 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素。
  5. E:nth-last-of-type(n), 與:nth-last-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素。
  6. E:last-child, 匹配父元素的最后一個子元素，等同于:nth-last-child(1)。
  7. E:first-of-type, 匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于:nth-of-type(1).
  8. E:last-of-type, 匹配父元素下使用同種標(biāo)簽的最后一個子元素，等同于:nth-last-of-type(1)。
  9. E:only-child, 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1).
  10. E:only-of-type, 匹配父元素下使用同種標(biāo)簽的唯一一個子元素，等同于:first-of-type:last-of-type或:nth:first-of-type(1):nth-last-of-type(1).
  11. E:empty, 匹配一個不包含任何子元素的元素，注意：文本節(jié)點也被看作子元素。

示例：

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的反選偽類

E:not(s),匹配不符合當(dāng)前選擇器的任何元素

示例：

:not(p) {
  border: 1px solid #ccc;
}

CSS3中的:target偽類

E:target,匹配文檔中特定"id"點擊后的效果

示例：

h2:target {
  color: white;
  background: #f60;
}

后代元素選擇器和子元素選擇器的區(qū)別

這里我們簡單討論下后代元素選擇器和子元素選擇器的區(qū)別

  1. 寫法不一樣：

    后代元素選擇器標(biāo)識：空格

    如：ul li{ width:150px; },ul和li之間用空格隔開

    子元素選擇器標(biāo)識：>

    如：ul>li{ width:150px; },ul和li之間用>隔開

  2. 功能不一樣
    接著上例來說:

    后代選擇器是選擇ul包圍的,所以元素中的所有l(wèi)i元素，包括子元素、孫元素、曾孫元素等等等。

    子選擇器僅僅選擇ul包圍的 子元素中的 li元素，不包括孫元素、曾孫元素等等等。

  3. 兼容性不一樣：

    后代選擇器是所有瀏覽器都兼容的，都可使用。

    子選擇器在IE6、IE7、IE8中則是不被支持的選擇器，各自bug！

示例

二、CSS優(yōu)先級

什么是CSS優(yōu)先級？

CSS優(yōu)先級是指CSS樣式在瀏覽器中被解析的先后順序。

樣式的優(yōu)先級

多重樣式（Mutiple Styles）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是多重樣式的使用情況。

一般情況下，（外部樣式）External style sheet <（內(nèi)部樣式）Internal style sheet <（內(nèi)聯(lián)樣式）Inline style

例外：如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將會覆蓋內(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>測試！</h3>
</body>
</html>

選擇器的優(yōu)先級

給不同的選擇器分配不同的權(quán)值

選擇器 內(nèi)聯(lián)樣式（style=""） id選擇器 類選擇器/屬性選擇器/偽類選擇器 標(biāo)簽選擇器
權(quán)重 1000 100 10 1

解釋：

  1. 內(nèi)聯(lián)樣式表的權(quán)值最高1000;
  2. id選擇器權(quán)值100;
  3. 類選擇器/屬性選擇器/偽類選擇器權(quán)值10;
  4. 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)先級法則

比較樣式的優(yōu)先級是，只需統(tǒng)計不同選擇器的個數(shù)，然后與對應(yīng)的權(quán)值相乘即可。根據(jù)結(jié)果便可得出優(yōu)先級。

  1. 結(jié)果較大的優(yōu)先級較高；
  2. 結(jié)果相同，則后定義的優(yōu)先級較高
  3. 創(chuàng)作者的優(yōu)先級高于瀏覽者，網(wǎng)頁編寫者設(shè)置的CSS樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式。
  4. 繼承的CSS樣式優(yōu)先級低于后來指定的CSS樣式
  5. 若樣式值中含有!important，則該值優(yōu)先級最高

看到這里，有些同學(xué)是不是對!important有點迷惑呀為什么有了它，就優(yōu)先級最高吶下面我們再來詳細(xì)講一講!important~

三、!important知識點

!important簡介

!important 是CSS1就定義的語法，作用是提高指定樣式的應(yīng)用優(yōu)先權(quán)。

語法格式：{cssRule !important}，即寫在定義的最后面，例如：box { color: red !important}

聲明了!important的樣式，具有最高的優(yōu)先級，相當(dāng)于寫在最下面（最后定義）

IE 6.0下的!important

IE 6.0不完全支持!important

IE支持重定義中的!important，例如：

.yuanxin { color:#e00 !important; }
.yuanxin { color:#000; }

你將會發(fā)現(xiàn)定義了樣式class="yuanxin"時，在IE下，字體顯示為紅色（#e00）。
但不支持同一定義中的!important。例如：

.yuanxin { color: #e00 !important; color: #000; }

此時在IE6下不支持，你將會發(fā)現(xiàn)定義了樣式class="yuanxin"時，字體顯示為黑色（#000）。

解釋：

important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里)，IE 6.0認(rèn)為!important優(yōu)先級較高，否則當(dāng)含!important的樣式屬性被同一個{}里的樣式覆蓋時，IE 6.0認(rèn)為!important較低!
再舉一個例子：

/*樣式1*/
#a{width:100 !important;} /*有效*/
#a{width:50px;} /*無效*/
/*樣式2*/
#a{width:100px !important; width:50px;} /*width:100px無效，width:50px 有效*/

因為IE 6.0一直都不完全支持這個語法，而其他的瀏覽器都支持。因此我們就可以利用這一點來分別利用!important，我們可以針對IE和非IE瀏覽器設(shè)置不同的樣式，只要在非IE瀏覽器樣式的后面加上!important。

完。

總結(jié)內(nèi)容參考以下：

w3school_CSS 選擇器參考手冊
阮一峰_CSS選擇器筆記
css選擇器優(yōu)先級深入理解
CSS 的優(yōu)先級機制[總結(jié)]

十分感謝你們的分享n(*≧▽≦*)n

注：原文章首發(fā)于：CSS選擇器、優(yōu)先級以及!important知識總結(jié)，現(xiàn)遷移至此。

<script async src="http://jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容