Question

我正在使用烦人的CSS样式表，要求所有<a>链接都写为<a class="nounderline">，以及其他各种类似的东西。我在主CSS文件中没有发言权，但如果我愿意，我可以将自己的额外CSS应用于页面。

因此，鉴于上述约束，是否有一种简单的方法可以将二级CSS添加到我的页面中，以便特定上下文中的所有<a>标记都会自动将上述类应用于它们？

例如，

<html>
<head>
  <title>classes in CSS</title>
    <style>
      /* something like the following would be present in the master CSS: */
      .nounderline {text-decoration:none;}
      /* I want to add something like the following: */
      div.maintext a {class:nounderline;} /* I don't know... I'm guessing! */
    </style>
</head>
<body>
  <div class="maintext">
    <a href="http://example.com">look, no underline!</a>
  </div>
</body>
</html>

对此的任何建议都会很棒！

Answer 1

单独使用CSS无法实现的目标，您需要使用JavaScript或编辑模板。当然，如果你知道.nounderline的所有规则，那么你可以将它们复制到.maintext a。

JavaScript解决方案

var anchors = document.querySelectorAll(".maintext a"),
    length = anchors.length, i;

for(i = 0; i < length; i++) {
    anchors[i].className += " nounderline";
}

如果您操作CSS不是不可能，那么您应该这样做：

.nounderline,
.maintext a { ... }

我不支持使用JavaScript解决方案，除非您绝对必须 - 如果约束可以以任何方式解除，它确实应该是。

Answer 2

您应该将JQuery的addClass函数用于所有a标记

Answer 3

你不能在CSS中定义任何类，更不用说“子类”了。 CSS只能通过用标记语言（HTML）分配的类来引用元素。

如果样式表中包含带有选择器.nounderline的规则，并且您希望将该规则中的声明应用于所有a元素，那么只需将该规则从该样式表复制到您自己的样式表并将.nounderline替换为a。

重写CSS子类

3 个答案: