html - 选择父元素之外的 CSS 元素

Question

我想选择父选择器之外的 CSS 元素。我可以只用 CSS 做到这一点吗？下面是我想要实现的例子:

<p>Register Form</p>
<div>
  <p>Full Name :</p>
  <p><input type='text' name='name' required></p>
</div>
<p>Please fill in the box above</p>

我想制作 <p>在div之后如果输入类型不为空，则隐藏。下面是style我试过但结果失败:

<style>
div > p input:required:valid + p {
    display: none;
}
</style>

Answer 1

遗憾的是，这不能用纯 CSS 来完成。您不能使用 css 修改元素的父元素，只能修改子元素和后续的兄弟元素。

您可以让 javascript 在父 div 的子输入有效/无效时切换类，然后使用 CSS 修改父 div 的兄弟。