在焦点输入上更改标签的文本颜色

Question

这是我的HTML代码：

<label>
    <p>text description</p>
    <input type="text">
</label>

关注<input>时，我想更改text-color代码中的<p>。

如何编写CSS代码？

Answer 1

您无法从<p>访问上一个兄弟元素（<input>）。

但您可以使用以下解决方案：

label {
  display:flex;
}
p {
  order:-1;
}
input:focus ~ p {
  color:red;
}

<label>
  <input type="text">
  <p>text description</p>  
</label>

Answer 2

使用:focus-within伪类选择器可以实现这一点。

  

焦点在CSS伪类中匹配：focus伪类匹配的任何元素，或者具有：focus伪类匹配的后代。 （这包括阴影树中的后代。）

     

:focus-within @ MDN

Support Details

lable {
  margin: 1em;
  border: 1px solid grey;
}

label:focus-within p {
  color: red;
}

<label>
    <p>text description</p>
    <input type="text">
</label>