当子元素仅在 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 {&nbsp; &:nth-child(1) .dropdown-list {&nbsp; &nbsp; top: 342px;&nbsp; &nbsp; border: 2px dashed black;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; &:nth-child(2) .dropdown-list {&nbsp; &nbsp; top: 404px;&nbsp; &nbsp; border: 2px dashed gold;&nbsp; }}