深入了解CSS中的“.”選擇符

一、由淺入深了解“.”選擇符

CSS中的“.”選擇符是一種很基礎的選擇器，它可以選擇頁面中所有符合指定類名的元素。例如，有如下HTML代碼：

<p class="intro">這是一段簡介文字。</p>
<div class="content">這是正文內容。</div>
<p class="intro">這是另一段簡介文字。</p>

如果想要對所有class為“intro”的p元素設置樣式，我們就可以使用“.”選擇符：

.intro {
  color: red;
}

使用“.”選擇符時，類名前需要添加“.”符號，這樣CSS才能正確識別出該選擇器。

可以看到，使用“.”選擇符可以很方便地選取指定類名的元素，並對其進行樣式設置。

二、結合其它選擇器使用“.”選擇符

除了單獨使用“.”選擇符，它還可以與其它選擇器組合使用，以選擇更精確的元素。

如下面的HTML代碼：

<div id="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="other">其它元素</div>
</div>

如果想要對“container”元素下所有class為“box”的元素設置樣式，可以使用“.”選擇符結合“ ”後代選擇器：

#container .box {
  background-color: yellow;
}

可以看到，結合“ ”後代選擇器後，可以更加準確地選中指定class的元素。

三、應用場景舉例

“.”選擇符的應用場景非常廣泛，以下是幾個比較常見的應用場景。

1. 樣式復用

在頁面中，某些元素需要擁有相同的樣式，可以給它們添加同樣的類名，然後使用“.”選擇符進行樣式設置。

<p class="highlight">這是需要突出的文字。</p>
<p class="highlight">這也是需要突出的文字。</p>
.highlight {
  color: red;
}

2. 樣式區分

相對於樣式復用，樣式區分是給不同的元素添加不同的類名，然後使用“.”選擇符進行樣式設置。這樣做可以讓不同的元素擁有不同的樣式。

<p class="intro">這是一段簡介文字。</p>
<p class="content">這是正文內容。</p>
.intro {
  font-weight: bold;
}
.content {
  color: blue;
}

3. JS操作

在JS代碼中，可以使用“.”選擇符快速獲取指定元素，並對其進行操作。

var intro = document.getElementsByClassName('intro');
for (var i = 0; i < intro.length; i++) {
  intro[i].style.color = 'red';
}

使用“.”選擇符獲取指定元素的代碼很簡潔，並且非常方便。

結語

“.”選擇符是CSS中非常基礎、常用的一種選擇器，掌握它的用法至關重要。在實際項目中，我們需要靈活運用“.”選擇符，並結合其它選擇器，來實現各種樣式效果。