Question

点击输入并在var friends = [{ id: 1122, name: 'Adrianna Budzinski'}, { id: 3785, name: 'Amy Divine'}, { id: 1555, name: 'Gale Purdue'}, { id: 1920, name: 'Rex Feng'}, { id: 2010, name: 'Samella Vizcaino'}, { id: null, name: 'Bethanie Weaver'}, { id: null, name: 'Celesta Gullo'}, { id: null, name: 'Darrick Fort'}, { id: null, name: 'Edmundo Boulanger'}, { id: null, name: 'Freddie Lanclos'}, { id: null, name: 'Gregory Lickteig'}, { id: null, name: 'Gwendolyn Cuadra'}, { id: null, name: 'Krystal Brosnahan'}, { id: null, name: 'Lahoma Pagani'}, { id: null, name: 'Senaida Risk'}, { id: null, name: 'Valarie Lopes'}]; friends.sort(function(a, b) { // if id's are equal compare name property // id of a is null then return 1 // id of b is null then return -1 // else return the difference of them return (a.id == b.id && a.name.localeCompare(b.name)) || (a.id === null && 1) || (b.id === null && -1) || (a.id - b.id); }); console.log(friends);元素前面后，我必须更改背景颜色。仅使用<p>并不困难，但只有input。

代码

＆＃13;

<p>

＆＃13;

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

＆＃13;

但是没有工作

Answer 1

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

＆＃13;

<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>

＆＃13;

Answer 2

首先，你所要求的在技术上是不可能的：用当前的选择器模块来选择前一个元素是不可能的。相邻兄弟和一般兄弟组合子（分别为+和~）只能选择跟随当前元素的元素。

同样，没有父选择器。

尽管如此，如果您可以重新排列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弹性框来重新排序页面视觉流的视觉技巧。 <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先于元素和：焦点

2 个答案: