html - 文本输入 CSS 的样式父级

Question

我有一个包装在 div 中的文本输入。当输入聚焦时，我想更改父 div 的 :after 的 css 属性。我如何在 CSS 中做到这一点？

<div class="dataInputTextContainer">
    <input class="dataInputText"  />
</div> 

我试过了，但没用:

.dataInputText:FOCUS ~ .dataInputTextContainer:after{
    background-color: red;
}

Answer 1

简单地说，你不能

(抱歉)

CSS 在 DOM 后裔方面起作用，因为只能为随后出现在 DOM 中的元素构造规则。因此，您无法选择父代，甚至是之前的 sibling 。

我倾向于建议你坐下来，退后一步，弄清楚你想要完成的事情。 99% 的情况是其他人已经做到了，或者您只需对 CSS 或 HTML 稍作更改即可完成。

顺便说一句，一个解决方案不是是尝试在输入上设置:before 或:after 样式，它是一个替换元素，因此此类元素不适用。为什么不简单地为 input 添加一个 label 并设置样式呢？