0

我可以做类似的事情：

#id1 .class1, #id2 .class1{
   color:#FFF;
}

但这似乎很笨重，特别是如果我有大量的 ID 想与 1 个班级分享。

我宁愿做这样的事情：

#id1, #id2 .class1{
   color:#FFF;
}

显然这不起作用，但你明白我的意思。

想法？

编辑：

在我被激怒之前，可能应该提到我正在超越 CSS 框架。想想 bootstrap 或 zurb 基础。这就是为什么需要这样做而不是仅仅使用一个类。我只是想知道在原生 CSS 中是否还有其他我不知道的继承选择器。

4

5 回答 5

2

您可以使用像LESS这样的编译成 CSS 的语言。它的众多功能之一就是以下 LESS：

#id1, #id2 {

  .class1 {
      color: #fff;
  }

}

编译为：

#id1 .class1,
#id2 .class1 {
  color: #fff;
}

该编译可以在服务器端（lessphp或 less.js）或客户端（less.js）完成，具体取决于您的偏好/需要。

于 2013-04-25T23:20:06.537 回答
2

那这个呢？

.class1
{
  color:#FFF;
}
于 2013-04-25T23:18:21.573 回答
1

我建议阅读一些有关 CSS 特异性的内容。

http://css-tricks.com/specifics-on-css-specificity/

首先尝试编写一个足够具体的选择器来覆盖 CSS 框架。

这可能涉及做类似的事情

html body .class-i-want-to-override { /* ... */ }

它可能需要放在!important那里，尽管这应该是你最后的手段。

.my-class { color: pink !important; }

最后，我建议研究像SASS这样的 CSS 预处理器。这将使您以更有效的方式写作。

#special1,
#special2,
#special3 {
  .override {
    color: pink;
  }
}

这将被编译为：

#special1 .override, #special2 .override, #special3 .override {
  color: pink;
}
于 2013-04-25T23:24:57.950 回答
1

你想多了。类的重点是涵盖多个项目。你只需要说：

    .class1{
       color:#FFF;
    }

这仅在 2 种情况下不会直接起作用。

  1. 您的课程出现在其他地方。查找（或创建）围绕您的类的独特元素，例如

    ul .class1{
  color:#FFF;
}

  2. 你有这个类出现在其他类型的元素上。在这种情况下：

    li.class1{
  color:#FFF;
}
于 2013-04-25T23:19:58.033 回答
0

为什么不只使用一个类？

或者在具有这些 ID 的元素中应用一个公共类？作为一个元素可以同时有一个ID和类..

下面的代码是一个基本示例：

#commonClass .class1{
   color:#FFF;
}
于 2013-04-25T23:16:40.993 回答