如何使用css选择器选择父母的兄弟姐妹div [duplicate]

How to use css selector to select sibling of parents div [duplicate]

提问人:Maurice 提问时间:11/17/2023 更新时间:11/17/2023 访问量:39

问:

我想在输入字段有效或无效时选择标签。如何实现此目的?

<div class="amplify-flex" style="flex-direction: column;">
   <fieldset class="amplify-flex" style="flex-direction: column;">
      <span class="amplify-visually-hidden">
         <legend>Sign in</legend>
      </span>
      <div class="amplify-flex amplify-field amplify-textfield">
         <label class="amplify-label" for="amplify-id-:r4:">Email</label>
         <div class="amplify-flex amplify-field-group amplify-field-group--horizontal" data-orientation="horizontal">
            <div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal" data-orientation="horizontal"><input aria-invalid="false" autocomplete="username" class="amplify-input amplify-field-group__control" id="amplify-id-:r4:" required="" type="text" name="username"></div>
         </div>
      </div>
css css-selectors

评论

1赞 CBroe 11/17/2023
CSS 没有父选择器;你将不得不在这里使用(除非用户明确启用,否则在Firefox中仍然不支持。:has()
0赞 Maurice 11/17/2023
那没关系,但我已经用 has 尝试过了,但无法让它运行
0赞 CBroe 11/17/2023
展示你尝试过什么,而不仅仅是告诉我们你是如何失败的。
0赞 Maurice 11/17/2023
所以我的想法是通过选择 .amplify-input 类并在其上使用 :has 来处理 DOM,但是当我使用 document.querySelector(“.amplify-input:has(*)”) 时没有可用的节点
1赞 CBroe 11/17/2023
*是匹配任何类型元素的通用选择器。 将查找包含任何其他元素的元素。您的标签包含任何元素,它只有文本内容。.amplify-label:has(*).amplify-label

答:

0赞 Maurice 11/17/2023 #1
.amplify-field:has(input:valid) label

查找具有有效输入字段且具有标签作为子级的所有类 (.amplify-field)

感谢@CBroe!