使用相同的 CSS 类对两个部分进行不同的样式设置答案

【问题标题】：Styling two sections differently with the same CSS class使用相同的 CSS 类对两个部分进行不同的样式设置
【发布时间】：2021-08-02 06:36:35
【问题描述】：

我有一个我继承的网站。在不深入细节的情况下，更改此站点上的代码已被证明是困难的。我现在有两个部分要赋予不同的背景颜色。

HTML：

<div class="wrapper">
<section class="easier_sec">
    <div class="container clearfix">
        <h3>See our ice maker in action...</h3>
                    <a href="https://vimeo.com/" class="btn"> VIEW VIDEO </a>
            </div>
</section>
<section class="easier_sec">
    <div class="container clearfix">
        <h3>Getting started is easier than you think…</h3>
                    <a href="contact-us/" class="btn"> CONTACT US </a>
            </div>
</section>
</div>

我正在处理的页面上还有很多部分，但这是我想要更改的仅有的两个部分。

我已经尝试了使用子选择器的各种 CSS 命令，但都没有工作。我希望有一种方法可以做到这一点，而无需尝试深入研究代码。

我试过的CSS：

.wrapper section:last-child {
    background-color:#000 !important;
} 

.wrapper section.easier_sec:first-child {
    background-color:#000 !important;
} 

section.easier_sec::first-child {
    background-color:#000 !important;
} 

section.easier_sec:first-child {
    background-color:#000 !important;
} 

.easier_sec:first-child {
    background-color:#000 !important;
}

【问题讨论】：

请查看stackoverflow.com/questions/2717480/…的答案
好的，所以我确实发现我可以使用最后一个类型，只需更改最后一部分（因为第二部分是最后一部分）。如果我想计算部分并将第二个更改为倒数，我也可以使用第 n 个类型。兄弟组合器的使用非常有趣。我必须记住所有这些，因为它们都是新的。谢谢！
呃，为什么都是!important？这很快就会变成一团糟！
您的元素检查器显示什么？为什么这些不起作用？您的样式有可能在有问题的样式之前加载。如果上面有!important，它们将覆盖您的!important。

标签： html css css-selectors

【解决方案1】：

您可以通过添加另一个类来覆盖那些部分中的旧背景样式来摆脱那些 :first-child 选择器喜欢：

bg-dark {
   background-color: #000 !important;
}

【讨论】：

【解决方案2】：

如果您想在添加更多部分时交替背景，您可以随时查看:nth-child(even) {background-color:#000 !important}。

【讨论】：

【解决方案3】：

您还可以为其中一个指定一个 ID 或一个额外的类，然后将一组不同的样式应用于该特定部分。

【讨论】：

我可以，但正如我在帖子中解释的那样，在这个特定站点上更改代码非常复杂。

【解决方案4】：

最后最简单的方法是使用：

section:last-of-type {background-color:#000!important;}

谢谢赛义德·拉赫曼！

【讨论】：

换句话说，你错误地将背景应用到了错误的元素上？因为这里唯一的区别是你将它应用到最后一个而不是你最初尝试做的第一个。
不，我使用的是 first-child 而不是 first-of-type 和 last-child 而不是 last-of-type。如果您查看我上面的第一个示例 CSS，您会看到 last-child 就是其中之一。