html - 组合样式

Question

我一直希望能够将一个样式类包含在另一个样式类中。例如

med-font {
  font-size:12px;
}

#message a {
  style: med-font;
  color: blue;
  ...
}

/* lots of other styles, some of which use med-font */

显然这是一个精简的示例，但关键是#message 中的所有这些 anchor 标记不需要显式类或 ID。现在我要么在每个需要它的类中复制字体大小，要么将类添加到不需要它的东西中。因为我想从一个地方轻松控制字体大小，所以我通常会开始添加类。

另一种解决方案是拆分此示例中“#message a”的定义(如下)。这适用于小型元素，但对于大型元素，这实际上是我最不喜欢的解决方案。如果您将许多类分开并分散在大型样式文件周围，这会使站点维护变得非常困难。

med-font, #message a {
  font-size:12px;
}

#message a {
  color: blue;
  ...
}

所以我的问题分为两个部分:1. 这会惹恼其他人吗？ 2. 有谁知道 CSS3 是否正在/正在考虑此功能？

编辑: 添加 html 正文示例和更多详细信息...

重点是给下面的20个anchor添加一个class属性来设置它们的字体大小很繁琐。

<div id="username" class="med-font">schickb</div>
<div id="message">
  <div id="part1">
    <a href="whatever">text</a>
    <!--lots more tags and say 6 anchors -->
  </div>
  <div id="part2">
    <a href="foo">text</a>
    <!--lots more tags and say 8 anchors -->
  </div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
    <a href="boo">lala</a> 
    <p class="med-font">Company Name</p>
    <!-- other tags and 3 more anchors -->
</div>

请记住，一个重要的目标是在一个地方声明“med-font”，以便于调整。在我的实际元素中，有小、中、大三种字体样式。我只需要一个声明，这样我就不必搜索 css 来说将 12px 更改为 11px。

目前最好的解决方案是为正文中的所有 anchor 添加“med-font”类，为页脚中的所有 anchor 添加“small-font”类。但我更愿意按照我最初展示的方式进行操作，并在“#message a”和“#footer a”的样式中简单地包含所需的字体。

总结:我希望CSS更加DRY

Answer 1

不，这不会让我烦恼，因为你可以为一个元素使用多个类，并且两者都会匹配:

.idiot {
   color:pink;
   text-decoration:underline;
}

.annoying {
   font-weight:bold;
}

/* and if you want to get REALLY specific... */
.annoying.idiot {
   background-image('ann.jpg');
}
...

<div class="annoying idiot">
   Ann Coulter
</div>

就我个人而言，我发现这是一个更通用的问题解决方案。例如，在 jQuery(或其他框架)中，您可以添加和删除这些类——最常见的是，您将添加一个“选定的”类或一些可能会做一些事情的东西，比如突出显示一个表格单元格，当有人点击将其关闭，您只需删除“选定”类。 super 优雅的 IMO。

为了响应您的编辑，要从所有 A 链接中删除 CSS，您只需执行如下操作:

#message > div > a {
   font-size:12px;
}

#footer > a {
    font-size:10px;
}

> 符号表示“是...的 child ”

或者，更一般地(但这也将直接匹配#message 内的 A 和任何更深的内容——空格表示“是任何后代”)

#message a {
   font-size:12px;
}

#footer a {
    font-size:10px;
}