多个ID共享1个类CSS

Question

我可以这样做：

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

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

我宁愿做类似的事情：

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

显然这不起作用，但你得到了我的漂移。

思考吗

编辑：

可能应该提到我在我受到抨击之前过度使用CSS框架。想想bootstrap或zurb基础。这就是为什么需要这样做而不只是使用一个类。我只是想知道在原生CSS中是否还有其他任何继承选择器。

Answer 1

这个怎么样？

.class1
{
  color:#FFF;
}

Answer 2

您可以使用编译为CSS的LESS之类的语言。其中一个功能就是以下LESS：

#id1, #id2 {

  .class1 {
      color: #fff;
  }

}

编译为：

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

根据您的偏好/需要，可以在服务器端（lessphp或更少.js）或客户端（less.js）完成编译。

Answer 3

你是在思考它。课程的重点是涵盖多个项目。所有你需要说的是：

    .class1{
       color:#FFF;
    }

这只能在2种情况下直接起作用。

1. 你的班级出现在其他地方。查找（或创建）类周围的唯一元素，例如

   ul .class1{
     color:#FFF;
   }
   

2. 您可以在其他类型的元素上显示该类。在这种情况下：

   li.class1{
     color:#FFF;
   }
   

Answer 4

我建议做一些关于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;
}

Answer 5

为什么不只使用一个班级？

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

以下代码是一个基本示例：

#commonClass .class1{
   color:#FFF;
}