根据标签标签的类别设置标签标签的样式 它是一个标签"for"

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

尝试使用属性选择器，如下所示:

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

• Firefox 8。
• ie 8 +
Chrome
• Safari 5
• Opera 11.52

这里有一把小提琴。http://jsfiddle.net/TeU7U/

Answer 2

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

遗憾的是，没有CSS来选择前一个兄弟。

您可以将类附加到标签或父元素上，而不是将required应用于输入元素，然后使用:

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/