〜在CSS中,但适用于所有HTML标记

Question

CSS:

input:focus ~ p {
    color: red;
}

HTML:

<div>
    <input type="text" />
</div>
<p>Please click on the input!</p>

我想制作p红色(仅限CSS),但输入是div...

可能吗？如何？

Answer 1

不,你不能在CSS中遍历你需要使用JavaScript的DOM树,如果你的标记只是你的CSS会工作

<input type="text" />
<p>Please click on the input!</p>

虽然这会让你输入红色的所有兄弟姐妹和兄弟姐妹P标签

但如果您使用上面的标记,那么使用下面的CSS只会选择下一个兄弟会更安全:

input:focus + p {
   color: red;
}

如果您使用jQuery 1.7+和原始标记,您可以:

$( "input" ).on('focus', function() {
  $(this).parent().next().css('color','red');
});