如何为特定类元素应用样式？如何仅给container-1内的链接添加下划线？

嘿，我来帮你搞定这两个问题，都是CSS选择器的基础应用，很容易上手的！

一、如何为拥有特定类的元素应用CSS样式？ #

CSS里的类选择器就是专门干这个的，语法很简单：用.加上你的类名，后面跟样式声明块就行。比如你想给container-2这个类的元素设置背景色和内边距，就这么写：

.container-2 {
  background-color: #f0f0f0;
  padding: 10px;
}

不管这个元素是div、p还是其他标签，只要它的class属性是container-2，就会应用这些样式。如果想同时给多个类的元素设置相同样式，可以用逗号分隔：

.container-2, .container-3 {
  border: 1px solid #ccc;
}

二、给container-1内所有链接加下划线，不影响container-5的链接 #

这里需要用到后代选择器——它能精准选中某个元素内部所有层级的目标元素。针对你的需求，只需要写这样的CSS：

.container-1 a {
  text-decoration: underline;
}

为什么这样有效？ #

看你提供的HTML结构：

<div class="container-1">
  <div class="container-2">
    <a href="#">Link 1</a>
    <div class="container-3">
      <a href="#">Link 2</a>
    </div>
  </div>
  <div class="container-4">
    <a href="#">Link 3</a>
  </div>
</div>
<div class="container-5">
  <div class="container-6">
    <a href="#">Link 4</a> <!-- 这个链接不会被下划线影响 -->
  </div>
</div>

.container-1 a会选中container-1内部所有的<a>标签，不管它们嵌套在多少层div里（比如Link1、Link2、Link3）。而container-5是和container-1同级的独立元素，它里面的链接不在container-1的后代范围内，所以完全不会被这个样式影响，完美符合你的需求！

内容的提问来源于stack exchange，提问作者user3877230