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

Question

我制作了两个选择字段下拉列表，它们包装在父容器下。它们都有具有相同类名的下拉菜单，因此我决定使用 ':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>考虑到这些下拉列表取决于事件，有没有办法让我应用这些样式？

Answer 1

您需要定位select-fieldwith:nth-child选择器：

.select-field {

  &:nth-child(1) .dropdown-list {

    top: 342px;

    border: 2px dashed black; 

  }

  

  &:nth-child(2) .dropdown-list {

    top: 404px;

    border: 2px dashed gold;

  }

}