一、什麼是CSS標籤選擇器？

CSS標籤選擇器是指利用HTML標籤作為選擇器選取對應元素的一種方法。它是CSS選擇器中最基本、最常用的一種，引用時只需在CSS樣式中使用對應的HTML標籤名就可以了。

比如，下面這段代碼會將所有的

元素顏色設置成紅色：

h1 {
  color: red;
}

二、如何使用CSS標籤選擇器？

1. 全局樣式

全局樣式是指作用於某種特定類型的元素，例如所有的段落、所有的列表元素、所有的標題元素等。全局樣式使用標籤來選擇元素。比如：

p {
  color: red;
  font-weight: bold;
}

上面這段代碼會將所有的

元素字體顏色設置成紅色並且字體加粗。這是一種非常方便的樣式處理方法，可以為頁面提供一致的視覺體驗。

2. 特定元素的樣式

有時候，我們需要為某個特定元素單獨設置樣式，這時候可以使用CSS標籤選擇器，指定該元素的標籤名並設置相應的樣式。比如：

<h1>這是一個標題</h1>

h1 {
  color: blue;
}

上面這段代碼會將此頁面中的所有

元素都設置成藍色。

3. 後代選擇器

後代選擇器是指指定某元素內部的另一個元素來設置樣式。後代選擇器使用空格隔開不同的元素，例如li a，表示li內部的a元素。比如：

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

#nav a {
  color: red;
}

上面這段代碼會將id為”nav”的div內部的所有超鏈接字體顏色設置為紅色。

4. 相鄰後代選擇器

相鄰後代選擇器是指指定某元素內部緊接著的另一個元素來設置樣式。相鄰後代選擇器使用>符號隔開不同的元素，例如ul>li，表示ul元素內部緊接著的li元素。比如：

<div id="nav">
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

#nav>ul>li>ul {
  display: none;
}

上面這段代碼會將id為”nav”的div內部的ul元素下緊接著的ul元素設置為不顯示。

5. 子選擇器

子選擇器是指指定某元素內部的子元素來設置樣式。子選擇器使用>符號隔開不同的元素，例如ul>li，表示ul元素的直接子元素li。子選擇器只會選擇直接子元素，而不會選擇孫子元素。比如：

<ul class="top-level">
  <li>Item 1</li>
  <li>Item 2
    <ul class="sub-level">
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

.top-level>li {
  font-weight: bold;
}

.sub-level>li {
  font-weight: normal;
}

上面這段代碼會將所有class為”top-level”的ul元素下的li元素字體設置成粗體，但不會影響子級別的”sub-level”。

三、總結

CSS標籤選擇器是HTML標籤選擇器中最基本、最常用的一種。無論是制定全局樣式還是針對特定元素設置樣式，標籤選擇器都會為我們提供便捷的幫助。同時，後代選擇器、相鄰後代選擇器和子選擇器可以更細緻地控制樣式的範圍，從而實現更精準的樣式控制。在實際的前端開發中，我們需要靈活、熟練地使用這些選擇器來為網頁元素添加各類樣式。