如何仅使用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;
}