样式父文本输入CSS

Question

我有一个包含在div中的文本输入。我想改变输入聚焦时父div之后的css属性。我怎么能在CSS中做到这一点？

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

我尝试了这个，但它不起作用：

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

Answer 1

简单地说，你不能

（对不起）

CSS的工作方式是DOM的后果，因为规则只能为随后出现在DOM中的元素构建。因此，您无法选择父级，甚至以前的兄弟。

我倾向于建议你坐下来，退后一步，找出你想要完成的事情。 99％的时间是其他人在那里做过的，或者你可以通过对CSS或HTML的微小改动来做到这一点。

顺便提一下，一个解决方案不是尝试在:before上设置:after或input，它是一个替换元素，因此这些元素不会应用。为什么不简单地为label添加input并为其设置样式？

Answer 2

如果您没有应用样式：在父级之后，而是将标记放在与input相同的级别，您可以使用此语法来应用兄弟标记的样式。