如何使用CSS选择器选中父级div同级元素及状态关联的label

云原生阿岚

2026-7-6

问题解答

1. 选择父级div的同级元素

CSS原生没有直接的“父级选择器”，但可以通过:has()伪类（现代主流浏览器均支持）结合兄弟选择器实现需求。针对你提供的HTML结构，以下是具体实现方式：

示例选择器

/* 选中包含输入框的.amplify-field div的所有后续同级元素 */
.amplify-field:has(.amplify-input) ~ * {
  /* 样式示例：添加红色外边框 */
  outline: 1px solid red;
}

/* 精准选中.amplify-field相邻的.amplify-visually-hidden同级元素 */
.amplify-visually-hidden + .amplify-field ~ .amplify-visually-hidden {
  /* 样式示例：文字设为蓝色 */
  color: blue;
}

原理说明

:has(.amplify-input) 匹配包含.amplify-input子元素的父容器（即.amplify-field）
~ * 匹配该容器之后的所有同级元素；若仅需选中相邻的同级元素，将~替换为+即可

2. 输入框状态变化时选中对应的label元素

label与输入框共享同一个父容器.amplify-field，可通过:has()伪类关联输入框的状态，从而选中对应label：

输入框无效状态（`aria-invalid="true"` 或 `:invalid`）

/* 通过:invalid伪类匹配无效状态 */
.amplify-field:has(.amplify-input:invalid) .amplify-label {
  color: red;
  font-weight: bold;
}

/* 通过aria-invalid属性匹配无效状态 */
.amplify-field:has(.amplify-input[aria-invalid="true"]) .amplify-label {
  color: red;
  font-weight: bold;
}

输入框有效状态（`aria-invalid="false"` 或 `:valid`）

/* 通过:valid伪类匹配有效状态 */
.amplify-field:has(.amplify-input:valid) .amplify-label {
  color: green;
}

/* 通过aria-invalid属性匹配有效状态 */
.amplify-field:has(.amplify-input[aria-invalid="false"]) .amplify-label {
  color: green;
}