CSS 選擇器

CSS選擇器是一種用于匹配HTML文檔中元素的模式。關聯(lián)的樣式規(guī)則將應用于與選擇器模式匹配的元素。

什么是選擇器

選擇器是CSS最重要的方面之一，因為它們用于選擇網頁上的元素，以便可以設置樣式。您可以通過多種方式定義選擇器。

通用選擇器

通用選擇器（用*星號或星號表示）與頁面上的每個單個元素匹配。如果目標元素上存在其他條件，則可以省略通用選擇器。此選擇器通常用于從元素中刪除默認的邊距和填充，以進行快速測試。

* {
    margin: 0;
    padding: 0;
  }

*選擇器內的樣式規(guī)則將應用于文檔中的每個元素。

元素類型選擇器

元素類型選擇器將文檔樹中元素的每個示例與相應的元素類型名稱進行匹配。

p {
    color: blue;
  }

p選擇器中的樣式規(guī)則將應用于<p>文檔中的每個元素，并使其顏色為藍色，無論它們在文檔樹中的位置如何。

ID選擇器

id選擇器用于為單個或唯一元素定義樣式規(guī)則。

ID選擇器的定義是一個井號（#），后跟ID值。

#error {
    color: red;}

此樣式規(guī)則將id屬性設置為的元素文本呈現(xiàn)為紅色error。

class類選擇器

類選擇器可用于選擇具有class屬性的任何HTML元素。具有該類的所有元素將根據定義的規(guī)則進行格式化。

用一個句號（.）緊隨其后的類值定義類選擇器。

.blue {
    color: blue;
      }

以上樣式規(guī)則將class屬性中設置為的文檔中每個元素的文本顯示為藍色blue。您可以使其更加具體。例如：

p.blue {
    color: blue;
    }

選擇器中的樣式規(guī)則p.blue僅<p>將class屬性設置為的那些元素呈現(xiàn)為藍色blue，而對其他段落沒有影響。

后代選擇器

當需要選擇一個元素是另一個元素的后代時，可以使用這些選擇器。例如，如果您只想定位無序列表中包含的那些定位點，而不要定位所有定位點元素。

ul.menu li a {
    text-decoration: none;
    }
h1 em {
    color: green;
    }

選擇器內的樣式規(guī)則ul.menu li a僅適用于<a>包含在具有class 的無序列表內的那些即錨元素.menu，并且對文檔內的其他鏈接沒有影響。同樣，h1 em選擇器內的樣式規(guī)則僅適用于<em>heading內包含的元素<h1>。

子選擇器

子選擇器只能用于選擇作為某些元素的直接子元素的那些元素。子選擇器由兩個或多個選擇器組成，兩個選擇器之間用大于號（即>）隔開。例如，您可以使用這些選擇器在具有多個級別的嵌套列表中選擇列表元素的第一級。

ul > li {
    list-style: square;
    }
ul > li ol {
    list-style: none;
    }

選擇器內的樣式規(guī)則ul > li僅適用于<li>作為<ul>元素直接子元素的那些元素，并且對其他列表元素沒有影響。

相鄰兄弟選擇器

相鄰的同級選擇器可用于選擇同級元素。該選擇器的語法類似于：E1 + E2，其中E2是選擇器的目標。

h1 + p以下示例中的選擇器<p>僅在<h1>和<p>元素在文檔樹中共享同一父級并且<h1>緊接在該<p>元素之前的情況下才選擇元素。這意味著只有每個<h1>標題之后的段落才   具有關聯(lián)的樣式規(guī)則。

h1 + p {
    color: blue;
    font-size: 18px;
    }
ul.task + p {
    color: #f0f;
    text-indent: 30px;
    }

通用兄弟選擇器

通用的同級選擇器與相鄰的同級選擇器（E1 + E2）類似，但不太嚴格。通用的同級選擇器由兩個簡單的選擇器組成，這些選擇器由波浪號（～）字符分隔。可以這樣寫：E1?E2，其中E2是選擇器的目標。

下例中的選擇器h1 ～ p將選擇該<p>元素之前的<h1>所有元素，其中所有元素在文檔樹中共享相同的父元素。

h1 ～ p {
    color: blue;
    font-size: 18px;
    }
ul.task ～ p {
    color: #f0f;
    text-indent: 30px;
    }

還有更多選擇器，例如屬性選擇器，偽類，偽元素。我們將在接下來的章節(jié)中討論這些選擇器。

分組選擇器

樣式表中的多個選擇器通常共享相同的樣式規(guī)則聲明。您可以將它們分組為一個逗號分隔的列表，以最大程度地減少樣式表中的代碼。它還可以防止您一遍又一遍地重復相同的樣式規(guī)則。

h1 {
    font-size: 36px;
    font-weight: normal;
   }
h2 {
    font-size: 28px;
    font-weight: normal;
   }
h3 {
    font-size: 22px;
    font-weight: normal;
   }

正如你可以在上面的示例中看到，相同的樣式規(guī)則font-weight: normal;是由選擇共享h1，h2和h3。因此，可以將其分為逗號分隔的列表，如下所示：

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}