Html 我想将现有的 CSS 样式应用于页面上的所有标签。如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6153920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to apply an existing CSS style to all labels on a page. How?
提问by John Munsch
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page?because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
请注意，这与旧问题如何在该页面中存在的所有按钮上应用 CSS不同？因为这是一种已经存在的风格。因此，鉴于包含的 CSS 文件中已经存在一种我们称为“standard_label_style”的样式，我该怎么做才能说此页面上的所有标签都应具有该样式，而无需添加：
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
对每一个人？是的，我知道我可以使用 jQuery 或 JavaScript 代码片段事后应用样式。我只是想学习我应该如何使用 CSS 来做到这一点。
Follow Up
跟进
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
我收到了几条评论，说只使用像这样的语法 .standard_label_style, label... 不幸的是，这并没有像我想要的那样。这将允许我对standard_label_style 类应用附加规则，以及对本页中的标签应用规则，但不允许我将该样式应用到本页上的所有标签。要查看此示例，这里有一个样式表和 html 来演示。没有类的标签仍然不会以红色显示，但这就是我希望发生的事情。我想将现有的类应用于页面上的所有标签，而不仅仅是具有该类的标签，并且没有在此页面上添加新样式，现有样式应该是唯一的样式。
included.css:
包含.css：
.standard_label_style { color: red; }
test.html:
测试.html：
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
回答by fearofawhackplanet
CSS doesn't really work like that.
CSS 并不是这样工作的。
You can apply a style to all labels directly:
您可以直接将样式应用于所有标签：
label {
color: Lime;
}
or apply a class to all labels
或将类应用于所有标签
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
您还可以有多个选择器，因此您可以将当前样式修改为
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
你不能在标准 CSS 中做的是
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLessif you're using .NET which provides nested rules and a basic inheratance model.
好消息是，有一堆服务器端库，这使得CSS的吸少，让你这样做正是这种事情，例如参见带点如果你使用.NET提供嵌套的规则和基本inheratance模型。
回答by whostolemyhat
To apply a style to every label on the page, use this CSS:
要将样式应用于页面上的每个标签，请使用以下 CSS：
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
如果 CSS 中已有样式（例如“standard_label_style”），则可以将其应用于每个标签：
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
这将影响通过站点的每个标签，因此请谨慎使用！
回答by AllisonC
In your css file, can't you just put
在你的 css 文件中，你不能把
.standard_label_style, label
{
//styles
}
回答by Pedro Correia
.standard_label_style, label {
/* stuff */
}
回答by Ian Jacobs
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
我不确定你能不能......一种可能的解决方法（虽然感觉有点hackish）是将样式附加到你的body标签，然后将css更改为：
body.standard_label_style label{
//Your styles here
}
回答by Chris Sobolewski
One of the most underused CSS tricks of all time: Give your bodies an id or class!
有史以来最未被充分利用的 CSS 技巧之一：给你的身体一个 id 或 class！
HTML:
HTML：
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
CSS：
#standard_label_style label{
the styles
}
will take the styles, while
将采用样式，而
HTML:
HTML：
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
将不会。
回答by ninjagecko
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
您在这里处理的是 CSS 优先级。“更模糊”的声明（body 标签、类）在“不太模糊”的声明（特定元素、内联 CSS）之前应用。
Thus your answer depends on howthe stylesheet is defining labelstyles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
因此，您的答案取决于样式表如何定义label样式。例如，如果它说label {...}，那么这是相当具体的，最好的办法是使用更具体的 CSS 样式，请参阅：
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
正如我所说，您需要覆盖的“特异性”级别取决于您的其他样式表的具体程度。根据链接，“嵌入在 html 中的 CSS 总是在外部样式表之后，无论 html 中的顺序如何”。
There is also a chance that if you yourself define label {your custom css}that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
如果您自己定义label {your custom css}应该工作，如果您之后导入样式表，也有可能。这是我会首先尝试看看它是否有效。你试过这个吗？结果如何？
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inheritor as appropriate.
请注意，如果您想完全覆盖其他样式表，您还需要通过将其值设置为inherit或 适当地重置您不使用的任何 CSS 。
