Question

我有一个基于 基础示例 的代码段，使用flexbox定位以前的兄弟。它与li元素很好地协作，但是一旦我尝试使用标签和输入它就会停止工作。

不幸的是，我依赖的是一个将标签放在第一位并输入第二位的代码，这使得它无法在input:focus上进行定位和操作。

我是否有机会从CSS开始工作（我使用的是Sass，这是一个选项）？

基本示例来自一个类似的，但一般的question查询定位前一个兄弟，而不是标签+输入：焦点对。

基础示例

＆＃13;

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

＆＃13;

<ul>
    <li>B</li>
    <li>A</li>
</ul>

＆＃13;

示例I＆＃39;尝试上班

＆＃13;

div{ 
    display: flex
}
input:focus + label{
    color:red;
}
label{
    order: 1;
}

＆＃13;

<div>
  <label for="NAME">Name</label>
  <input type="text">
</div>
<div>
  <label for="EMAIL">Email</label>
  <input type="email">
</div>

＆＃13;

Answer 1

由于我们在CSS中没有先前的兄弟选择器，这是纯CSS方式使用fragment.updateFragment(data ..);来颠倒顺序

＆＃13;

direction: rtl;

＆＃13;

div{ 
  direction: rtl;
  text-align:left;
}
div *{ 
  direction: ltr;
}
input:focus + label{
  color:red;
}

＆＃13;

Answer 2

可以有一个粗略的CSS技巧来模仿你所寻找的东西，但是可以破解。请参阅mix-blend-mode和caniuse

＆＃13;

div {/* or use the direction properties */
  display:flex;
  flex-flow:row-reverse;
  justify-content:flex-end
}

label {
  display:inline-block;
  position:relative;
  width:5em;
  background:white;/* will remain white */
  mix-blend-mode:screen; /* whatever is black will show what's behind */
}
input:focus {
  box-shadow: 5em 0 red
}

＆＃13;

<div>
  <label for="NAME">Name</label>
  <input type="text">
</div>
<div>
  <label for="EMAIL">Email</label>
  <input type="email">
</div>

＆＃13;

Answer 3

正如你们许多人指出的那样，纯粹使用CSS仍然没有解决方案。我将不得不使用jQuery解决这个问题。

感谢您努力尝试提供答案。非常感谢。

输入上的目标标签：在DOM中输入标签之前对焦？

基础示例

示例I＆＃39;尝试上班

3 个答案: