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