Question

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

class="standard_label_style"

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

跟进

我得到了一些评论，说只要使用这样的语法.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>

Answer 1

CSS并不像那样。

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

label {
    color: Lime;
}

或将类应用于所有标签

.labelClass {
    color: Lime;
}

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

你也可以有多个选择器，所以你可以推荐你当前的风格

.labelClass, label {
    color: Lime;
}

标准CSS中你不能做的就是

label {
    .labelClass;
}

好消息是有很多服务器端库可以让CSS减少并让你做到这一点，例如，如果你使用提供嵌套规则的.NET，请参阅dotLess和基本的inheratance模型。

Answer 2

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

label {
/* styles... */
}

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

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

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

Answer 3

在你的css文件中，你不能只是把

.standard_label_style, label
{
 //styles
}

Answer 4

.standard_label_style, label {
    /* stuff */
}

Answer 5

我不确定你是否可以...一种可能的解决方法（虽然感觉有点hackish）是将样式附加到你的身体标签，然后改变css为：

body.standard_label_style label{
   //Your styles here
}

Answer 6

有史以来最缺乏使用的CSS技巧之一：给你的身体一个id或类！

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>

不会。

Answer 7

您在这里处理CSS优先级。 “更模糊”（正文标记，类）的声明在声明之前应用，这些声明“不太模糊”（特定元素，内联CSS）。

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

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

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

如果您自己定义应该有效的label {your custom css}，还有可能在之后导入样式表。我会首先尝试看它是否有效。你试过这个吗？结果是什么？

请注意，如果您想要完全覆盖其他样式表，则还需要重置任何未使用的CSS，方法是将其值设置为inherit或适当。

我想将现有的CSS样式应用于页面上的所有标签。怎么样？

7 个答案: