一、由浅入深了解“.”选择符
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中非常基础、常用的一种选择器，掌握它的用法至关重要。在实际项目中，我们需要灵活运用“.”选择符，并结合其它选择器，来实现各种样式效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/156795.html
微信扫一扫 
支付宝扫一扫 