html - 我想将现有的 CSS 样式应用于页面上的所有标签。如何?

标签 html css stylesheet

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

class="standard_label_style"

每个人?是的,我知道我可以使用一段 jQuery 或 JavaScript 代码事后应用这些样式。我只是想了解我应该如何使用 CSS 来完成它。

跟进

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

included.css:

.standard_label_style { color: red; }

测试.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>

最佳答案

CSS 并不是那样工作的。

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

label {
    color: Lime;
}

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

.labelClass {
    color: Lime;
}

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

你也可以有多个选择器,所以你可以修改你当前的风格

.labelClass, label {
    color: Lime;
}

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

label {
    .labelClass;
}

好消息是有一堆服务器端库可以减少 CSS 的性能,让你可以做这种事情,例如 dotLess如果您使用的是提供嵌套规则和基本继承模型的 .NET。

关于html - 我想将现有的 CSS 样式应用于页面上的所有标签。如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6153920/

相关文章:

javascript - 菜单打开后H1不隐藏

html - 如何将表单输入和标签放在一起?

html - Css 背景图片根本不显示

javascript - 为什么在重新计算 chrome 开发工具中的样式之前评估过 js ?

javascript - 如何通过 JavaScript 自动 Google 音译文本区域中的单词(无需手动按空格键或 Enter 键)

javascript - 关于通过 DOM 解析 XML

css - 通过单击加号或标签打开 CSS Accordion

css - 带或不带 'px' 后缀的 CSS 中零像素的大小?

angular - Angular 中的全局 scss 文件和组件的 scss 文件之间的区别

css - 如何在 chrome 中启用实时 CSS 编辑?