我想将现有的 CSS 样式应用于页面上的所有标签。如何？答案

【问题标题】：I want to apply an existing CSS style to all labels on a page. How?我想将现有的 CSS 样式应用于页面上的所有标签。如何？
【发布时间】：2011-05-27 14:48:40
【问题描述】：

注意，这与旧问题How can I apply CSS on all buttons which are present in that page? 不同，因为这是一种已经存在的样式。因此，考虑到我们称之为“standard_label_style”的样式已经存在于包含的 CSS 文件中，我该怎么做才能说此页面上的所有标签都应该具有该样式而不是添加：

class="standard_label_style"

对每一个人？是的，我知道我可以使用 jQuery 或 JavaScript 代码的 sn-p 事后应用样式。我只是想了解应该如何使用 CSS。

跟进

我有几个 cmets 说只使用这样的语法 .standard_label_style, label... 不幸的是，这与我想要的完全不同。这将允许我将其他规则应用于 standard_label_style 类，以及将规则应用于此页面中的标签，但不允许我将该样式应用于此页面上的所有标签。要查看这方面的示例，这里有一个样式表和 html 来演示。没有类的标签仍然不会以红色显示，但这就是我希望发生的事情。我想将现有的类应用于页面上的所有标签，而不仅仅是具有该类的标签，并且不在此页面上添加新样式，现有样式应该是唯一的样式。

included.css：

.standard_label_style { color: red; }

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

【问题讨论】：

标签： html css stylesheet

【解决方案1】：

CSS 并不是这样工作的。

您可以直接将样式应用于所有标签：

label {
    color: Lime;
}

或将一个类应用于所有标签

.labelClass {
    color: Lime;
}

<label class="labelClass"></label>

您还可以有多个选择器，因此您可以将当前样式修改为

.labelClass, label {
    color: Lime;
}

在标准 CSS 中你不能做的事情是

label {
    .labelClass;
}

好消息是，有一堆服务器端库可以减少 CSS 的麻烦，让您可以做这种事情，例如，如果您使用的是 .NET，请参阅 dotLess基本继承模型。

【讨论】：

【解决方案2】：

要将样式应用于页面上的每个标签，请使用以下 CSS：

label {
/* styles... */
}

如果您在 CSS 中已有样式（例如“standard_label_style”），您可以将其应用于每个标签：

.standard_label_style, label {
/* styles... */
}

这会影响网站上的每个标签，因此请谨慎使用！

【讨论】：

该语法并不适用于每个标签，该语法允许我选择标准标签样式和任何标签标签以添加或更改与两者关联的样式。它不会做任何事情来使 standard_label_style 的样式特征应用于 HTML 中的标签。

【解决方案3】：

在你的css文件中，你不能放

.standard_label_style, label
{
 //styles
}

【讨论】：

很遗憾没有，请参阅修改后问题中的示例。

【解决方案4】：

.standard_label_style, label {
    /* stuff */
}

【讨论】：

不。这将允许我修改 standard_label_style 是什么，但它并不适用于所有标签。
不。实际上它“说”所有标签元素和/或任何应用了standard_label_style类的元素都使用定义的样式属性。
感谢您的指正。你猜怎么着，它仍然没有让你的答案正确......
并不是说听起来像个聪明人，但你想做的事是不可能的。唯一的方法是使用提供给您的任何建议或通过 JavaScript：jsfiddle.net/cdZHu/1

【解决方案5】：

我不确定您是否可以...一种可能的解决方法（虽然感觉有点骇人听闻）是将样式附加到您的 body 标签，然后将 css 更改为：

body.standard_label_style label{
   //Your styles here
}

【讨论】：

我同意使用 CSS 选择器是你最好的选择。

【解决方案6】：

有史以来最未被充分利用的 CSS 技巧之一：给你的身体一个 id 或 class！

HTML：

<body id="standard_label_style">
    <label>Hey!</label>
</body>

CSS：

#standard_label_style label{
    the styles
}

将采用样式，而

HTML：

 <body id="custom_label_style">
     <label>Custom!</label>
 </body>

不会。

【讨论】：

【解决方案7】：

您在这里处理的是 CSS 优先级。 “更模糊”的声明（主体标签、类）在“不那么模糊”的声明（特定元素、内联 CSS）之前应用。

因此，您的答案取决于样式表如何定义label 样式。例如，如果它说label {...}，那么这是相当具体的，最好的办法是使用更具体的 CSS 样式，请参阅：

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/（好教程？）
CSS precedence

正如我所说，您需要覆盖的“特异性”级别取决于您的其他样式表的具体程度。根据链接，“嵌入在 html 中的 CSS 始终位于外部样式表之后，无论 html 中的顺序如何”。

如果你自己定义label {your custom css}，如果你之后导入你的样式表，那也有可能。这是我首先尝试看看它是否有效。你试过这个吗？结果如何？

请注意，如果您想完全覆盖其他样式表，您还需要通过将其值设置为 inherit 或视情况来重置您未使用的任何 CSS。

【讨论】：