〜在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');
});