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

在一般兄弟选择(~)不正是你想要的.它基本上只在前面有第一个元素时才选择第二个元素.

试试这样:

.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>

更新:刚刚意识到你也可以使用相邻的兄弟选择器(+)如果label保证在输入之前立即.一般兄弟选择器(~)是CSS3的一部分,因此可能无法在不兼容的浏览器中工作,而相邻的兄弟选择器(+)是CSS2的一部分.