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的一部分。

CSS的条件宽度

1 个答案: