一、常用的選擇器

1.元素選擇器（Element Selector）：通過元素名稱來選擇元素。

元素選擇器通過元素名稱來選擇元素，是CSS中最基本的選擇器之一。下面是一個例子，演示如何使用元素選擇器來選擇所有的段落元素，并將它們的顏色設(shè)置為紅色：

p {

  color: red;

}

2.類選擇器（Class Selector）：

.red-text {

  color: red;

}

上面的代碼中，.red-text表示選擇所有class為“red-text”的元素，color: red;表示將它們的顏色設(shè)置為紅色。這樣，所有class為“red-text”的元素都會變成紅色。在HTML中，我們可以這樣使用類選擇器：

<p class="red-text">這是一段紅色的文字。</p>

3.ID選擇器（ID Selector）：

#header {

  background-color: gray;

}

上面的代碼中，#header表示選擇ID為“header”的元素，background-color: gray;表示將它的背景顏色設(shè)置為灰色。這樣，ID為“header”的元素的背景顏色就會變成灰色。在HTML中，我們可以這樣使用ID選擇器：

<div id="header">這是一個頭部。</div>

4.通配符選擇器是CSS中最基本的選擇器之一，它可以匹配HTML文檔中的所有元素。通配符選擇器使用“*”作為選擇器，下面是一個例子，演示如何使用通配符選擇器來選擇所有的元素，并將它們的邊框設(shè)置為1像素的紅色實線：

復(fù)制* {

  border: 1px solid red;

}

上面的代碼中，*表示選擇所有的元素，border: 1px solid red;表示將它們的邊框設(shè)置為1像素的紅色實線。這樣，所有的元素都會有1像素的紅色實線邊框。通配符選擇器雖然可以匹配所有的元素，但是由于它會匹配到HTML文檔中的所有元素，因此在實際開發(fā)中應(yīng)該謹(jǐn)慎使用，以免影響性能。

二、群組選擇器

群組選擇器是CSS中常用的選擇器之一，它可以同時選擇多個元素，并對它們應(yīng)用相同的樣式。群組選擇器使用逗號分隔多個選擇器，下面是一個例子，演示如何使用群組選擇器來選擇所有的段落元素和所有的標(biāo)題元素，并將它們的顏色設(shè)置為紅色：

復(fù)制p, h1, h2, h3, h4, h5, h6 {

  color: red;

}

上面的代碼中，p, h1, h2, h3, h4, h5, h6表示選擇所有的段落元素和所有的標(biāo)題元素，color: red;表示將它們的顏色設(shè)置為紅色。這樣，所有的段落元素和標(biāo)題元素都會變成紅色。群組選擇器可以同時選擇多個元素，使得樣式的應(yīng)用更加方便和靈活。

三、關(guān)系選擇器

后代選擇器

后代選擇器是CSS中常用的選擇器之一，它可以選擇某個元素的后代元素，并對它們應(yīng)用樣式。后代選擇器使用空格分隔兩個選擇器，下面是一個例子，演示如何使用后代選擇器來選擇所有段落元素中的strong元素，并將它們的顏色設(shè)置為紅色：

p strong {

  color: red;

}

上面的代碼中，p strong表示選擇所有段落元素中的strong元素，color: red;表示將它們的顏色設(shè)置為紅色。這樣，所有段落元素中的strong元素都會變成紅色。后代選擇器可以選擇某個元素的后代元素，使得樣式的應(yīng)用更加和靈活。

2.子代選擇器

子代選擇器是CSS中常用的選擇器之一，它可以選擇某個元素的直接子元素，并對它們應(yīng)用樣式。子代選擇器使用“>”符號分隔兩個選擇器，下面是一個例子，演示如何使用子代選擇器來選擇所有ul元素中的直接子元素li元素，并將它們的顏色設(shè)置為紅色：

ul > li {

 color: red;\}

上面的代碼中，ul > li表示選擇所有ul元素中的直接子元素li元素，color: red;表示將它們的顏色設(shè)置為紅色。這樣，所有ul元素中的直接子元素li元素都會變成紅色。子代選擇器可以選擇某個元素的直接子元素，使得樣式的應(yīng)用更加和靈活。

3.相鄰兄弟選擇器

相鄰兄弟選擇器是CSS中常用的選擇器之一，它可以選擇某個元素后面緊跟著的兄弟元素，并對它們應(yīng)用樣式。相鄰兄弟選擇器使用“+”符號分隔兩個選擇器，下面是一個例子，演示如何使用相鄰兄弟選擇器來選擇所有class為item的元素后面緊跟著的兄弟元素，并將它們的顏色設(shè)置為紅色：

.item + * {

  color: red;\}

上面的代碼中，.item + *表示選擇所有class為item的元素后面緊跟著的兄弟元素，color: red;表示將它們的顏色設(shè)置為紅色。這樣，所有class為item的元素后面緊跟著的兄弟元素都會變成紅色。相鄰兄弟選擇器可以選擇某個元素后面緊跟著的兄弟元素，使得樣式的應(yīng)用更加和靈活。

4.通用兄弟選擇器

通用兄弟選擇器是CSS中常用的選