仅选择具有多个结果的 nth-child 的第一个实例答案

【问题标题】：Only select first instance of nth-child with multiple results仅选择具有多个结果的 nth-child 的第一个实例
【发布时间】：2022-01-13 06:23:31
【问题描述】：

我使用的网页构建器限制了我对设计某些方面的控制。目前，它预先格式化了我所有的 div 元素，以使其包含在容器中。样式表在所有容器上都有一个最大宽度，我只想为第一个容器删除它。

页面看起来像这样（简化）

...
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="myClass" id="1">
        ...
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="myClass2" id="2">
        ...
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="myClass3" id="3">
        ...
        </div>
      </div>
    </div>
  </div>
</section>

我要更改的 CSS 是针对 .container 的，但我只想针对 #1 更改它。现在我有：

<style>
div.container:nth-child(5) {max-width: none !important;}
</style>

但这会选择所有页面上的容器，因此#1、#2、#3 等都没有最大宽度。

这里的任何帮助将不胜感激！

【问题讨论】：

section:first-of-type > div:first-of-type
显示的选择器不会从给定的 HTML 中选择任何内容，因为每个部分只有一个容器。

标签： html css css-selectors

【解决方案1】：

听起来你想在第一部分更改容器的宽度。

<style>
    section:first-of-type>.container {max-width: none !important;}
</style>

【讨论】：

【解决方案2】：

:nth-child() CSS 伪类根据元素在一组兄弟元素中的位置匹配元素

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

尝试使用自定义类解决

【讨论】：