css 在元素和 :focus 之前

Question

我必须在单击输入后更改 <p> 元素之前的背景颜色。仅 input 不难，但 <p> 是。

代码

    input[type="text"]:focus ~ .prefix{
       background-color:#e4ff00 !important;
    }

    input[type="text"]:focus + .prefix{
       background-color:#e4ff00 !important;
    }

<div class="inputholder holder50">
       <p class="prefix">NIP</p>
       <input type="text" value="" name="nip">
    </div>

但不起作用

Answer 1

如果你在 donwards 中使用 p 它会起作用

<div class="inputholder holder50">
   <input type="text" value="" name="nip">   
   <p class="prefix">NIP</p>
</div>

<style>
input[type="text"]:focus ~ .prefix{
background-color:#e4ff00 !important;
}

input[type="text"]:focus + .prefix{
background-color:#e4ff00 !important;
}
</style>

Answer 2

首先，您的要求在技术上是不可能的：使用当前的 selectors 模块不可能 select 上一个元素。相邻兄弟组合器和一般兄弟组合器（分别为 + 和 ~）只能 select 个跟在当前元素之后的元素。

同样没有parent-selector.

不过，如果您可以重新排列 HTML 以将 <p> 元素放置在之后 <input> 元素，这是可能的:

  input[type="text"]:focus + .prefix {
    background-color: #e4ff00;
  }

<div class="inputholder holder50">
  <input type="text" value="" name="nip">
  <p class="prefix">NIP</p>
</div>

但是，如果您需要 <p> 元素位于 <input> 之前，这也是可能的，尽管这实际上是一种视觉技巧，使用 CSS flex-boxes 重新排序视觉效果<p> 元素在 HTML:

中仍然是 <input> 的后兄弟时的页面流

.inputholder {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}

div.inputholder p.prefix {
  order: 1;
  flex: 0 1 auto;
  width: 100%;
  align-self: auto;
}

div.inputholder input {
  order: 2;
  flex: 0 1 auto;
  align-self: auto;
}


input:focus + p {
  background-color: #e4ff00;;
}

<div class="inputholder holder50">
  <input type="text" value="" name="nip">
  <p class="prefix">NIP</p>
</div>

参考文献：

css 在元素和 :focus 之前

css preceded element and :focus

html

css

focus