如何根据伪级的孩子为父母定型？

Question

我有一个包含输入标签的跨度，并且我声明了一个：在跨越造型的伪元素之后。

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中使用关系pseudo-class ： 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
• 按照Haworth，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>