~ 在 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 中遍歷 DOM 樹，你必須使用 JavaScript，如果你的標記只是

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

雖然這會使所有兄弟姐妹和兄弟姐妹的孩子在您輸入后變成紅色

但是如果你使用上面的標記，那么使用下面的 CSS 會更安全，它只會選擇下一個兄弟：

input:focus + p {
   color: red;
}

如果您將 jQuery 1.7+ 與原始標記一起使用，則可以執行以下操作：

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