深入了解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中非常基础、常用的一种选择器，掌握它的用法至关重要。在实际项目中，我们需要灵活运用“.”选择符，并结合其它选择器，来实现各种样式效果。