包含特定控件的标签的CSS选择器？

Question

我有这个标签和复选框

<label><input type="checkbox" id="SameAsPrimaryAddress" />Same As Primary Address</label>

是否有一个CSS选择器只会影响标签文本而不是复选框，或者我是否必须将我的标签与输入分开，或者为标签提供ID或类以便能够执行此操作？

Answer 1

取决于

在这种情况下，如果您只需要该HTML，则可以。

但是

最好使用span或div包装文字，以避免遇到问题。

这是一个演示 http://jsfiddle.net/6aS4k/

然后您可以使用label span {}

添加样式

Answer 2

您的回答：否。 没有选择器只能定位元素的自由浮动文本，而不会影响其他元素的继承属性。要明确地设置文本样式，您实际上希望将文本包装在CSS中的另一个元素中，例如span。

但是，在您的特定情况下，该复选框在大多数浏览器默认样式表中没有很多（如果有）继承属性。因此，只要您不使用重置样式表或以其他方式对该输入进行规范化来继承样式属性，您就可以通过样式化label来仅影响文本。

最后，我建议您的标签应该分别与您的输入分开对应，这在语义上也是有意义的。这也允许您使用for属性，这样就可以点击您的标签来切换相应的复选框，这是可用性的胜利！

<div>
  <input type="checkbox" id="SameAsPrimaryAddress" />
  <label for="SameAsPrimaryAddress">Same As Primary Address</label>
</div>