CSS基礎(chǔ)掃盲-CSS選擇器

為什么會(huì)有CSS選擇器

一個(gè)HTML文件由很多HTML標(biāo)簽構(gòu)成，我們有很多CSS規(guī)則或者描述文件讓這些HTML長(zhǎng)得異常炫酷辟灰。但是問(wèn)題是我們?nèi)绾握业竭@些HTML標(biāo)簽个榕？又如何讓一個(gè)CSS對(duì)一組標(biāo)簽起作用，又如何讓某個(gè)標(biāo)簽在這些統(tǒng)一的CSS中長(zhǎng)得又別樣一些芥喇？如何讓這些CSS規(guī)則又只對(duì)某個(gè)標(biāo)簽的子標(biāo)簽起作用西采？這就涉及到CSS選擇器，也就是讓CSS找到匹配的標(biāo)簽（可能是一個(gè)继控，也可能是多個(gè)）械馆。

常見CSS選擇器

鑒于上面的場(chǎng)景誕生了很多種CSS選擇器。下面我們介紹下常見的CSS選擇器武通，為了方面下文描述類選擇器霹崎，下面預(yù)先給一段HTML片段，所有的CSS都是基于該HTML（建議大家可以對(duì)著下面的代碼在瀏覽器里實(shí)踐一遍加深印象）冶忱。

<div class="hello" id="hello-p">
  <p class="hello" id="hello-s">
    Hello<strong>strong</strong>
  </p>
  <p class="world" id="world">
    world!
  </p>
  <p class="hello" id="hello-coder">
    Hello coder!
  </p>
  <strong>strong2</strong>
</div>

• 標(biāo)簽選擇器

  標(biāo)簽選擇器就是匹配某一類標(biāo)簽的選擇器尾菇。直接用標(biāo)簽名字后面接CSS描述內(nèi)容，如下：

  div {
    background-color: red;
  }
  

  這就表示整個(gè)html文檔中所有div標(biāo)簽的背景色都為紅色。如果有多個(gè)同樣的標(biāo)簽選擇器错沽，那么順序靠后的生效簿晓。如下：

  div {
    background-color: red;
  }
  div {
    background-color: green;
  }
  

  最終效果是div的背景色為綠色。

• 類選擇器

  類選擇器是會(huì)匹配具有同樣類名的一組標(biāo)簽的選擇器千埃。用“.”+類名 來(lái)描述類選擇器憔儿，如下：

  .hello {
    background-color: red;
  }
  

  這樣就會(huì)讓div以及div下面的第一個(gè)和第三個(gè)p標(biāo)簽的背景色都為紅色。也就是類選擇器可以做到選擇一組不同類型的標(biāo)簽放可。突破了標(biāo)簽選擇器只能選擇同一類標(biāo)簽的限制谒臼。典型場(chǎng)景：多個(gè)標(biāo)簽都有外觀，比如背景色耀里，大小蜈缤，圓角等。

• id選擇器

  id選擇器就是精準(zhǔn)匹配某一個(gè)元素的選擇器冯挎。如其名所說(shuō)底哥，id通常具有唯一性，也就是定位某個(gè)單一元素房官；如果細(xì)心的同學(xué)就能夠發(fā)現(xiàn)前面兩個(gè)選擇器都是組選擇器（也就是能夠選擇到多個(gè)標(biāo)簽）趾徽。用“#”+id 名描述id選擇器，如下：

  #hello-p {
    background-color: red;
  }
  

  id為hello-p的p標(biāo)簽背景色會(huì)變?yōu)榧t色翰守。注意優(yōu)先級(jí)id選擇器>類選擇器>標(biāo)簽選擇器孵奶。

• 后代選擇器

  后代選擇器選擇器表示匹配指定標(biāo)簽后代的選擇器。通常后臺(tái)選擇器由兩部分構(gòu)成：父選擇器 + 空格 + 子類選擇器蜡峰。比如我們想讓div標(biāo)簽的第二個(gè)p標(biāo)簽背景色變?yōu)榧t色了袁，可以如下寫

  .hello .world {
      background-color: red;
  }
  

  注意兩個(gè)選擇器之間有空格。表示在所有類為hello的標(biāo)簽的子標(biāo)簽中湿颅，將類名為world的標(biāo)簽背景色置為紅色载绿。注意如果是想多個(gè)選擇器共用一個(gè)CSS描述規(guī)則，選擇器之間用逗號(hào)隔開肖爵。如下將id為hello-s和world背景色均置為紅色：

  #hello-s,#world {
    background-color: darkred;
  }
  

• 子類選擇器

  子類選擇器是匹配標(biāo)簽的直接子標(biāo)簽卢鹦，不影響其子標(biāo)簽的后代的選擇器。也就是只影響第一代劝堪。父選擇器 + “>” + 子類選擇器冀自，如下我們想將div標(biāo)簽的直接strong標(biāo)簽背景色置為紅色：

  div > strong {
    background-color: red;
  }
  

  可以看到div的直接strong子標(biāo)簽的背景色改變變?yōu)榱思t色，而id為hello-s的標(biāo)簽p標(biāo)簽里的strong標(biāo)簽則沒有任何變化秒啦。注意在表達(dá)子類時(shí)候也可以用選擇器嵌套熬粗。

• 相鄰兄弟選擇器

  相鄰兄弟選擇器會(huì)匹配標(biāo)簽的兄弟標(biāo)簽（前提是這兩個(gè)兄弟標(biāo)簽具有共同父標(biāo)簽）。通常是選擇器 + “+” + 標(biāo)簽余境。如下將id為hello-s的p標(biāo)簽緊接著p標(biāo)簽背景色變?yōu)榧t色：

  #hello-s + p {
    background-color: red;
  }
  

基本上能看到的復(fù)雜CSS選擇器都是上面的幾種組合驻呐，萬(wàn)變不離其宗灌诅。