如何使用css查找以前的HTML标记的兄弟

Question

如何仅使用CSS查找以前的HTML标记的兄弟：

<div class="form-group">
  <label for="userID">User ID</label>
  <input id="userID" type="text" class="form-control" placeholder="Enter User ID" tabindex="1"/>
</div>

Answer 1

我认为你不能，但你可以找到下一个兄弟姐妹。你甚至没有写你要搜索的元素和目标是什么，但我想你想从<label>到<input> ..？

然后只需颠倒它们在html中的顺序，你就可以使用css放回订单了。

HTML：

<div class="form-group">
  <input id="userID" type="text" class="form-control" placeholder="Enter User ID" tabindex="1"/>
  <label for="userID">User ID</label>  
</div>

CSS

.form-group {
    display: flex;
    flex-direction: column; // if they should be one one line each
}

[for="userID"] {
    order: -1;
}