如何根据子类的伪类设置父类的样式？

Question

我有一个包含输入标签的跨度，并且我在跨度中声明了一个 :after 伪元素来设置它的样式。

span::after {
  content: 'valid';
  color: green;
}

input:invalid {
  outline: 2px solid red;
}


/*
span::after that contains an input:invalid {
  content: 'invalid';
  color: red;
}
*/

<span>
  <input type="number" min="2" />
</span>

我想在输入值无效时更改伪元素的颜色。

有没有办法用纯 CSS 来做到这一点？或者我必须使用一些 JavaScript 吗？

Answer 1

基于子元素设置父元素的样式只能在 CSS 中使用 关系伪类

:has()

，目前所有现代浏览器都支持。

你可以像这样实现它：

span:has(input:invalid)::after {
  color: red;
}

span::after {
  content: 'valid';
  color: green;
}

input:invalid {
  outline: 2px solid red;
}

span:has(input:invalid)::after {
  content: 'invalid';
  color: red;
}

<span>
  <input type="number" min="2" />
</span>

支持旧版浏览器：

• 实现一个 JavaScript polyfill
• 按照 A Haworth 的建议调整标记，以便可以使用 下一个同级选择器。

以下是如何调整标记的示例：

span::after {
  content: 'valid';
  color: green;
}

input:invalid {
  outline: 2px solid red;
}

input:invalid+span::after {
  content: 'invalid';
  color: red;
}

<input type="number" min="2" />
<span></span>