Question

我想将'foo'类添加到页面上的所有 section 元素中。我知道我可以简单地做到：

<section class="foo">...</section>

在每个部分元素上

，但是有很多部分。有没有更简单的方法可以做到这一点？（请注意：foo是第三类）。

我也意识到我可以这样设置样式：

section { font-style:...; color:...; /* all foo class styles */ }

但是然后我复制了'foo'类，这违反了我的原则。如果“ foo”类发生更改，我希望我的部分以相同的方式“自动”更改，而无需编辑重复的样式。

Answer 1

您面临的唯一限制是确定要设置样式的元素。这些标识符称为css selectors，您需要指定样式表中的哪些样式才能为其赋予样式。

如果您可以某种方式确定要样式化的所有元素，那么就拥有选择器。

定义了选择器后，您可以在.css中定义CSS规范

您可以为一个或多个选择器指定一种样式，也许这就是您想要的，只需执行以下操作：

.foo, section {
  font-style:...;
  color:...;
  /* all foo class styles */
}

希望有帮助！

Answer 2

对于将类添加到许多section元素的机械组件，取决于您的文本编辑器，您可能可以在整个文档中查找和替换。我相信Notepad++提供了这样的功能。

它看起来像：

find: <section>
and replace with: <section class="foo">

当然，您可能没有统一样式或分类的section元素。在这种情况下，您可以通过以下方式对其进行破解：

find: <section class="
and replace with <section class="foo 
*note the space after foo

这不是最优雅的解决方案，但是在某些情况下，它确实可以工作：）

Answer 3

通常可以帮助我的一个想法是，如果您希望它保持在页面范围内。我会给主体一个类名，然后执行body.classname部分，并应用我想考虑的所有类，因为他们都会拥有它。

    <body class = "page_identifier">
      <section></section>

      <section></section>

      <section></section>



      <section></section>
      <section></section>


      <section></section>

      ...etc


</body>

// Styles //
     body.page_identifier section{
          /*ENTER STYLES HERE */
     }

Answer 4

感谢您的回复。我希望在样式表中有某种方法可以做到这一点，但我想必须进行全局搜索/替换。没什么大不了的。谢谢。

Answer 5

已经提出了一些好的选择，我认为Nicolas的是最好的。例如，如果您使用access token secret，则可以扩展节样式：

Sass

您可以了解有关Sass here

的更多信息

CSS-向所有节元素添加类

5 个答案: