5. CSS選擇器

1. class 和 id 的使用場景：

  • id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"調用，其優先級高于類選擇器，一個標簽只能有一個id且每個id只能使用一次，多用于頁面分塊的塊級標簽上；
  • class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"調用，一個標簽可以有多個類且同一個類可以用到不同的標簽上，多用于多個標簽樣式相似或完全相同時。

2. CSS常見選擇器：

  1. 基礎選擇器
  • * : 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
  • #id : id選擇器，匹配特定id的元素
  • .class: 類選擇器，匹配class包含(不是等于)特定類的元素
  • element: 標簽選擇器
  1. 組合選擇器
  • E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
  • E F 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
  • E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素
  • E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
  • E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
  • .class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，.和 # 本身充當分隔符的元素
  • element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，.和 #本身充當分隔符的元素
  1. 屬性選擇器
  • E[attr] 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div）
  • E[attr=value] 匹配所有屬性為value的元素（div[type=text]匹配id=text的div）
  • E[attr~=value] 匹配所有屬性attr具有多個空格分隔，其中一個值等于value的元素
  • E[attr ^=value] 匹配屬性attr的值以value開頭的元素
  • E[attr $=value] 匹配屬性attr的值以value結尾的元素
  • E[attr *=value] 匹配屬性attr的值包含value的元素
  1. *偽類選擇器
  • E:first-child 匹配元素E的第一個子元素
  • E:last-child 匹配元素e的最后一個子元素
  • E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
  • E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于nth-of-type(1)
  • E:hover 匹配鼠標懸停的e元素
  • E:focus 匹配獲得焦點的e元素
  1. 偽元素選擇器
  • E::first-line 匹配E元素的第一行
  • E::first-letter 匹配E元素的第一個字母
  • E::before 在e元素之前插入生成的內容
  • E::after 在e元素之后插入生成的內容

3. 選擇器的優先級及計算：

  1. 屬性后+!important：p {color:#ccc!important;}
  2. 內聯樣式：
  3. id選擇器： #id
  4. 類選擇器： .class
  5. 偽類選擇器：a:link
  6. 屬性選擇器：h1{}
  7. 標簽選擇器：p[XXX]
  8. 通用選擇器：*
  9. 瀏覽器自定義

復雜場景時，計算優先級時通過數標簽來計算，先數id，如果id相等再數類，如果id不相等，id多的選擇器權重高，權重越高，優先級越高。如果id選擇器數量相同，再數類選擇器，最后數標簽。

權重計算規則：

  1. 第一等：代表內聯樣式，如: style=" "，權值為1000。
  2. 第二等：代表ID選擇器，如：#content，權值為0100。
  3. 第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
  4. 第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。
  5. 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
  6. 繼承的樣式沒有權值。
    !important 的作用是提升優先級，換句話說。加了這句的樣式的優先級是最高的（比內聯樣式的優先級還高)。

比較規則：

  1. 1,0,0,0 > 0,99,99,99。也就是說從左往右逐個等級比較，前一等級相等才往后比。
  2. 無論是行間、內部和外部樣式，都是按照這個規則來進行比較。而不是直觀的行間>內部>外部樣式；ID>class>元素。之所以有這樣的錯覺，是因為確實行間為第一等的權重，所以它的權重是最高的。而內部樣式可能一般寫在了外部樣式引用了之后，所以覆蓋掉了之前的。
  3. 在權重相同的情況下，后面的樣式會覆蓋掉前面的樣式。
  4. 通配符、子選擇器、相鄰選擇器等的。雖然權值為0000，但是也比繼承的樣式優先。
    實例： 
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*/
<a href="">第一條應該是黃色</a> <!--適用第1行規則-->
<div class="demo">
    <input type="text" value="第二條應該是藍色" /><!--適用第4、5行規則，第4行優先級高-->
    <a href="">第三條應該是黑色</a><!--適用第2、3行規則，第3行優先級高-->
</div>
<div id="demo">
    <a href="">第四條應該是紅色</a><!--適用第5、6行規則，第6行優先級高-->
</div>

4. a:link, a:hover, a:active, a:visited 意義及順序：

  • a偽類解釋：
  1. link：設置a對象在未被訪問前的CSS樣式；
  2. visited：設置a對象在其鏈接地址已被訪問過時的CSS樣式；
  3. hover：設置對象在其鼠標懸停時的CSS樣式；
  4. active：設置對象在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的CSS樣式；
  5. focus : 代表的是獲取焦點時的樣式，這個我們可以通過tab鍵來查看，一旦鏈接獲取了焦點，則它的樣式就是你設置的focus樣式。
  • 順序：
    a偽類的順序為：a:link > a:visited > a:focus >a:hover > a:active。
    前四個的順序有個比較簡便的記憶方法：L-V-H-A，即love & hate。
  • 原因：
  1. 鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；
  2. 鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；
  3. a:active是鼠標點擊與釋放之間發生的事件，并擁有鼠標懸停a:hover屬性；

由于偽類的選擇器優先級一致，后面的a鏈接樣式會覆蓋前面的。
所以說，a:hover定義一定要放在a:link、a:visited的后面，才能在鼠標懸停時，a:hover樣式不被a:link和a:visited樣式覆蓋；

  1. a:visited一定要放在a:link的后面，因為這樣能保證訪問過的鏈接具有a:visited樣式，并能覆蓋a:link默認樣式；
  2. a:active一定要放在a:hover后面。假如a:active放在a:hover前面，由于a:active擁有鼠標懸停a:hover屬性，當鼠標按下時，首先會觸發a:hover事件，然后觸發
  3. a:active，但是a:ctive已被a:hover的樣式所覆蓋，因此無法看到a:active的樣式。所以，a:active一定要放在a:hover后面。
  4. 補充a:focus的順序：
    • :hover 代表的是你光標經過某一元素時的樣式，如果將此樣式放在:focus之后，則當鏈接獲取焦點時，顯示:focus樣式，當光標經過此鏈接時，會顯示hover的樣式，因為hover排在后，會覆蓋focus樣式。
- 如果:hover排在前，:focus排在后，則當光標獲得焦點時顯示:focus的樣式，但當光標經過鏈接時，樣式并未顯示:hover的樣式，而是繼續是:focus的樣式，因為應用的focus樣式在hover之后，覆蓋了前面的樣式。

可用以下代碼進行具體演示

a:focus{
color:black;
text-decoration:underline;
}

a:hover{
color:#FF0000;
text-decoration:underline;  
}

a:active{
color:#FFCC00;
}

綜上所述，a偽類的順序為：a:link > a:visited > a:focus > a:hover > a:active。

5. 選擇器舉例：

/*id選擇器，匹配id值為header的元素*/
#header{
}
/*class選擇器，匹配class值為header的所有元素*/
.header{
}
/*后代選擇器，匹配class值為header元素的所有class值為logo的后代*/
.header .logo{
}
/*匹配class值包含header和mobile的元素 */
.header.mobile{
}
/*匹配class值為header元素后代中的p和h3元素*/
.header p, .header h3{
}
/*匹配id值為header元素后代中class值為nav元素中的li元素*/
#header .nav>li{
}
/*為id值為header元素后代中的a元素指定鼠標移動到其上方的樣式 */
#header a:hover{
}
/*在id值為header的元素后代中尋找：class值為logo元素之后的同級p元素*/
#header .logo~p{
}
/*在id值為header的元素后代中尋找type屬性為”text"的input元素*/
#header input[type="text"]{
}

6. div:first-child和div:first-of-type的作用和區別

div:first-child 匹配的是 div 的父元素下第一個子元素，而 div:first-of-type
匹配的是父元素下同種元素類型的第一個子元素。例如：

<div class="father">
  <h1 id="child1">AA</h1>
  <h2 id="child2">BB</h1>
  <h3 id="child3">CC</h1>
  <h2 id="child4">DD</h1>
</div>

如果有選擇器如下：
#child2:first-child，選中AA；
#child2:first-of-type，選中BB；
#child4:first-child，選中AA；
#child4:first-of-type，選中BB。

實例如下：

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>

<div class="ct"> 
    <p class="item1">aa</p> 
    <!-- 父元素div下第一個類為item1的子元素，父元素div下第一個類為item1的p標簽子元素，
    因此滿足.item1:first-child和.item1:first-of-type-->
    <h3 class="item1">bb</h3>
    <!-- 父元素div下第一個類為item1的h3標簽子元素，滿足.item1:first-of-type-->
    <h3 class="item1">ccc</h3> 
</div>

輸出結果如下：

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.class 和 id 的使用場景? class：類選擇器，一個標簽可以有多個類且同一個類可以用到不同的標簽上，...
    饑人谷_兔子君閱讀 1,215評論 0贊 0
  • class 和 id 的使用場景? class 重在樣式的復用，重普遍性。id重在劃分樣式區域，可以作為樣式表中的...
    南山碼農閱讀 396評論 0贊 0
  • 1 .class 和 id 的使用場景? .class，類選擇器。類選擇器可以定義多個元素。當你想定義一組元素以相...
    饑人谷_邵征鵬閱讀 378評論 0贊 0
  • 1.class 和 id 的使用場景? 類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也...
    草鞋弟閱讀 2,486評論 0贊 1
  • 一、CSS選擇器常見的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素，用一個*表示 元素選擇器~選...
    dengpan閱讀 978評論 0贊 3