如何将样式应用于具有特定类的元素？答案

【问题标题】：How do I apply styles to an element with a specific class?如何将样式应用于具有特定类的元素？
【发布时间】：2018-03-29 22:20:46
【问题描述】：

我希望container-1 div 中的每个链接都具有text-decoration: underline; 属性。如何在不更改 container-5 div 链接的情况下实现此目的？

<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 class="container-7">
            <a href="#">Link 5</a>
        </div
    </div>

    <div class="container-8">
        <a href="#">Link 6</a>
    </div>
</div>

【问题讨论】：

这是非常基本的 css - 我建议你做一个基本的教程，这样你就可以掌握它 - 如果你不知道怎么做，那么你将无法做到还有很多其他问题，您可能会用非常基本的问题来惹恼 SO 社区，这些问题可以通过一些研究来回答
我投票决定将此问题作为题外话结束，因为这是非常基本的 CSS，可以通过查看任何教程来学习
这可能是非常基本的，但从技术上讲，它不是题外话。 “基本”不是有效的关闭原因@Pete
@Pete 对认为缺乏努力的适当回应是反对票，而不是近距离投票。
@Pete 在您最后发表评论之前没有人粗鲁，请记住be nice。如果问题是重复的，请找到一个。当这个问题出现在简历队列中时，我寻找了一个，因为正如你所说，它非常基础。没有找到，我投了离开开放的票，因为否则它是主题。仅仅因为您懒得做正确的事情并寻找受骗者并不意味着您应该采取错误的行动并暗示由于其他一些虚构的原因而偏离主题。

标签： html css css-selectors

【解决方案1】：

您选择要设置样式的链接的父 div，在本例中为 .container-2，然后使用 a 选择所有链接。然后根据自己的喜好设置父 div 中的所有链接的样式，在本例中使用属性 text-decoration: underline;

链接 4、5 和 6 位于容器 5 中，由于您没有选择它们，因此不会设置样式。

因为默认情况下所有链接都带有下划线，所以我添加了color: red; 以表明它有效。

编辑：修正了 sn-p 中的错字

.container-2 a {
  text-decoration: underline;
  color: red;
}

<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 class="container-7">
            <a href="#">Link 5</a>
        </div
    </div>

    <div class="container-8">
        <a href="#">Link 6</a>
    </div>
</div>

【讨论】：

【解决方案2】：

使用 CSS 类选择器：

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

另外，阅读 this link 以开始使用 CSS 选择器，阅读 this one 以进一步了解 CSS3 选择器。

【讨论】：

虽然 W3Schools 比以前好多了，但我仍然建议不要将该网站共享为教程目的地； Mozilla 开发者网络将是一个更好的来源，因为它是一个 wiki，因此不会像 W3Schools 经常出现的那样出现准确性错误。
已修复。感谢您对@TylerH 发表评论。