本文目錄導(dǎo)讀：

1. 使用逗號(hào)分隔的選擇器
2. 使用類選擇器
3. 使用屬性選擇器

CSS中如何同時(shí)影響兩個(gè)標(biāo)簽的樣式

在CSS（層疊樣式表）中，我們經(jīng)常需要同時(shí)對(duì)多個(gè)HTML標(biāo)簽應(yīng)用樣式，這可以通過選擇器來實(shí)現(xiàn)，使得樣式可以同時(shí)應(yīng)用于多個(gè)元素，本文將介紹幾種常見的方法，展示如何在CSS中同時(shí)設(shè)置兩個(gè)標(biāo)簽的樣式。

使用逗號(hào)分隔的選擇器

一種常見的方法是使用逗號(hào)分隔多個(gè)選擇器，如果你想同時(shí)為<h1>和<p>標(biāo)簽設(shè)置字體顏色和大小，你可以這樣寫：

h1, p {
  color: blue;
  font-size: 16px;
}

在這個(gè)例子中，所有<h1>和<p>標(biāo)簽都將有藍(lán)色的文字和16像素的字體大小。

使用類選擇器

另一種方法是使用類選擇器，然后為這些類分配樣式，然后在HTML中為相應(yīng)的元素添加這些類。

.myClass {
  color: red;
  font-weight: bold;
}

然后在HTML中：

<h1 class="myClass">這是一個(gè)標(biāo)題</h1>
<p class="myClass">這是一個(gè)段落。</p>

在這個(gè)例子中，<h1>和<p>標(biāo)簽都會(huì)因?yàn)樘砑恿?code>myClass類而有相同的樣式。

使用屬性選擇器

你還可以使用屬性選擇器來同時(shí)選擇具有特定屬性的元素，如果你想選擇所有帶有data-type屬性的元素并應(yīng)用樣式，你可以這樣寫：

[data-type] {
  background-color: yellow;
}

這將為所有帶有data-type屬性的元素設(shè)置黃色背景，無論這些元素是<div>、<span>還是其他任何標(biāo)簽，都會(huì)受到影響。

在CSS中，我們可以通過多種方式同時(shí)設(shè)置兩個(gè)或多個(gè)標(biāo)簽的樣式，我們可以使用逗號(hào)分隔的選擇器來選擇多個(gè)元素，使用類選擇器將樣式應(yīng)用于具有特定類的元素，或者使用屬性選擇器來根據(jù)元素的屬性應(yīng)用樣式，這些方法都讓我們能夠更有效地管理和控制網(wǎng)頁的樣式。