Question

我试过了：

HTML：

<p><label for="address1">Address 1:</label> <input type="text" class="required" id="address1" name="address1" value="" /></p>

的CSS：

input.required + label { color: #c00; }

然而这似乎没有用......我做错了吗？

Firefox 8测试

Answer 1

尝试使用attribute selector，如下所示：

label[for='address1'] { color: #c00; }

这适用于以下浏览器

Firefox 8。
IE 8 +
铬
Safari 5
Opera 11.52

这是一个小提琴。 http://jsfiddle.net/TeU7U/

Answer 2

+选择器是兄弟选择器。 input + label将样式应用于<label>元素，该元素是<input>后面的下一个元素，如http://jsfiddle.net/Wg7Rr/所示。

不幸的是，没有CSS可以选择以前的兄弟。

您可以将类附加到标签上，而不是将required应用于input元素，而不是将其附加到父元素，然后使用：

label.required + input { color: #c00; }   /*<label class=required /><input>*/
.required > label { color: #c00}          /*<p class=required><label /><input>*/

Answer 3

input.required + label实际上会匹配紧跟输入所需类别的任何标签。这就是为什么它不适用于你的情况。

您可以使用label[for='address1']之类的内容，但如果要为与所需输入关联的每个标签设置样式，则只需将所需的类添加到包装p即可。然后，您可以使用p.required label作为选择器。

Answer 4

这应该有效。不确定它与旧版浏览器和性能问题的兼容性如何。

HTML：

<label>Address 1: <input type="text" class="required" id="address1" name="address1" value="" /></label>

CSS：

label > .required{
background:#900;

}

和一个小提琴

http://jsfiddle.net/S1l3/2eVQ8/

样式标签标签基于元素的类，它是标签“for”

4 个答案: