html - CSS 的条件宽度

Question

<div class="field">
  <label>Label</label>
  <input type="text" name="" value="">
</div>

<div class="field">
  <input type="text" name="" value="">
</div>

有什么方法可以根据标签有条件地设置输入宽度。所以如果标签存在:

.field label {
  width:25%;
}
.field input {
  width:75%;
}

其他:

.field input {
  width:100%;
}

我可以用 javascript 来做，但想知道它是否可以只用 CSS。

Answer 1

general sibling selector (~) 完全符合您的要求。它基本上仅在第一个元素之前选择第二个元素。

像这样尝试:

.field label {
  width:25%;
}

/* Default style */
.field input {
  width:100%;
}

/* If preceded by a label, input gets different style */
.field label ~ input {
  width:75%;
}

<div class="field">
  <label>Label</label>
  <input type="text" name="" value="">
</div>

<div class="field">
  <input type="text" name="" value="">
</div>

更新:刚刚意识到您还可以使用 adjacent sibling selector (+) 如果 label 保证紧接在输入之前。通用兄弟选择器 (~) 是 CSS3 的一部分，因此可能无法在不兼容的浏览器中工作，而相邻兄弟选择器 (+) 是 CSS2 的一部分。