当子元素仅在 onClick 事件上呈现时如何定位和分配特定的子元素答案

【问题标题】：How to target and assign specific child elements when the child elements only render on a onClick event当子元素仅在 onClick 事件上呈现时如何定位和分配特定的子元素
【发布时间】：2020-12-03 08:49:35
【问题描述】：

我制作了两个选择字段下拉菜单，它们被包裹在一个父容器下。它们都有具有相同类名的下拉菜单，所以我决定使用 ':nth-child' 选择器来定位第一个或第二个孩子。

    .select-field {

       .dropdown-list {

          &:nth-child(1) {
            top: 342px;
          }

          &:nth-child(2) {
            top: 404px;
          }
       }
    }

但是，它对两个孩子都应用了 ':nth-child(2)' 样式。我意识到这可能是这种情况，因为当仅单击一个选择字段下拉列表时，DOM 中只会呈现一个或另一个下拉列表。因此，如果我单击第一个选择字段，则在 DOM 中可以看到第一个选择字段的下拉列表，但第二个选择字段的下拉列表不是可以理解的。所以我认为它只认得一个孩子。

如果第一个选择域被点击，反之亦然：

<div class="container">
 <div class="select-field">
  <div class="dropdown-list">
   <ul>
     <li></li>
     <li></li>
   </ul>
  </div>
  </div>
 <div class="select-field">
 *other dropdown is not rendered*
 </div>
</div>

考虑到这些下拉列表依赖于事件，我有办法应用这些样式吗？

【问题讨论】：

您错误地定义了元素的类。应该是<div class="...">。您不需要额外的“名称”。
哦，抱歉，它实际上是 dom 中的“类”。我在 React 工作，所以他们称他们的类为“className”。我手动编写了示例。感谢您指出这一点！
您将:nth-child 应用于dropdown-list，根据您的代码是唯一子.select-field。如果您想选择第二个下拉菜单，不妨试试.select-field:nth-child(2) .dropdown-list?
那真的是 SCSS，不是 CSS，而且你的 HTML 是无效的。但是，就像@somethinghere 所说，:nth-child 适用于它所附加的元素，而不是它的子元素。

标签： javascript html sass

【解决方案1】：

正如@somethinghere 指出的，您需要使用:nth-child 选择器来定位select-field：

.select-field {
  &:nth-child(1) .dropdown-list {
    top: 342px;
    border: 2px dashed black; 
  }
  
  &:nth-child(2) .dropdown-list {
    top: 404px;
    border: 2px dashed gold;
  }
}

【讨论】：