如何在 CSS 中选择特定元素的多个嵌套实例？答案

【问题标题】：How do I select several nested instances of a specific element in CSS?如何在 CSS 中选择特定元素的多个嵌套实例？
【发布时间】：2021-12-28 22:25:36
【问题描述】：

我只想选择前两个嵌套的<img/> 元素并设置width: 200px; 或其他东西。我将如何使用组合器而不是给它们自己的类来选择它们？

我尝试过使用nth-child(-n+2)，但由于每个<img/> 都嵌套在不同的<div> 中，我认为它试图在每个<div> 中选择<img/> 的前两个实例而不是<section> 中的前两个 <img/> 实例。我仍在学习组合器，因此非常感谢您对答案的解释。

我的代码如下所示：

.section-container div {
  background-color: skyblue;
}

.section-container div img {
  width: 100px;
  height: 100px;
  background-color: red;
}

<body>
   <header>
      <!--Navbar stuff-->
      <h1>I'm the navbar</h1>
   </header>
   <section class="section-container">
      <h2>subheading</h2>
      <div>
         <img src="image 1"/>
         <p>1st div</p>
      </div>

      <div>
         <img src="image 2"/>
         <p>2nd div</p>
      </div>

      <div>
         <img src="image 3"/>
         <p>3rd div</p>
      </div>

      <div>
         <img src="image 4"/>
         <p>4th div</p>
      </div>
   </section>
   <form>
      <h2>Form</h2>
      <label for"name-input">Name*</label>
      <input id="name-input" type="text"></input>
      <button>Submit</button>
   </form>
</body>

【问题讨论】：

标签： html css asp.net asp.net-mvc css-selectors

【解决方案1】：

您需要将 nth-child 应用于实际的兄弟姐妹，因为 img 标记彼此不直接相关。

.section-container div:nth-child(-n+2) img {
  width: 100px;
  height: 100px;
  background-color: blue;
}

【讨论】：

这个解决方案有效，但是由于某种原因我不得不使用 (-n+3) 选择前两个图像，(-n+2) 只选择了第一个图像。
@EthanPartridge jsfiddle.net/Lt8jw9vf 对我来说它适用于 -n+2。您的实际代码结构与此不同吗？
我编辑了我的问题以更好地反映我的代码。我使用的是 asp.net mvc，所以标题实际上并不包含在这个实际的 html 页面中，而是在我的 Web 应用程序中的所有页面共享的共享布局页面中。为了以防万一，我继续将其包含在此示例中。
<h2>subheading</h2> 是造成这种情况的原因。
啊，我明白了。当我改用 .section-container div:nth-of-type(-n+2) img 时，它会选择前两个图像，因为我假设 nth-of-type 更具体。谢谢