Html 多个ID共享1类CSS_Html_Css

Html 多个ID共享1类CSS

html css

Html 多个ID共享1类CSS,html,css,Html,Css,我可以这样做： #id1 .class1, #id2 .class1{ color:#FFF; } #id1, #id2 .class1{ color:#FFF; } 但这似乎太大了，特别是如果我有一大堆的ID，我想和一个班级分享我更愿意做这样的事情： #id1 .class1, #id2 .class1{ color:#FFF; } #id1, #id2 .class1{ color:#FFF; } 显然这不管用，但你明白我的意思想法？编辑：在我被激怒之

我可以这样做：

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

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

但这似乎太大了，特别是如果我有一大堆的ID，我想和一个班级分享

我更愿意做这样的事情：

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

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

显然这不管用，但你明白我的意思

想法？

编辑：

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

为什么不使用类呢

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

以下代码中有一个基本示例：

#commonClass .class1{
   color:#FFF;
}

为什么不使用一个类呢

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

以下代码中有一个基本示例：

#commonClass .class1{
   color:#FFF;
}

这个怎么样

.class1
{
  color:#FFF;
}

这个怎么样

.class1
{
  color:#FFF;
}

你想得太多了。课程的重点是涵盖多个项目。你只需要说：

    .class1{
       color:#FFF;
    }

这仅在两种情况下无法直接起作用

你的班级出现在别处。查找（或创建）类周围的唯一元素，例如

ul .class1{
  color:#FFF;
}

这个类显示在其他类型的元素上。在这种情况下：

li.class1{
  color:#FFF;
}

你想得太多了。课程的重点是涵盖多个项目。你只需要说：

    .class1{
       color:#FFF;
    }

这仅在两种情况下无法直接起作用

你的班级出现在别处。查找（或创建）类周围的唯一元素，例如

ul .class1{
  color:#FFF;
}

这个类显示在其他类型的元素上。在这种情况下：

li.class1{
  color:#FFF;
}

您可以使用编译为CSS的语言。它的众多功能之一是以下功能：

#id1, #id2 {

  .class1 {
      color: #fff;
  }

}

汇编至：

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

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

您可以使用类似于CSS的语言。它的众多功能之一是以下功能：

#id1, #id2 {

  .class1 {
      color: #fff;
  }

}

汇编至：

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

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

我建议您阅读一下CSS的特殊性

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

这可能包括做一些类似的事情

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

它可能需要放置一个

！重要提示

，尽管这应该是您最后的选择

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

最后，我建议研究CSS预处理器，如。这将允许您以更高效的方式进行写作

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

这将被编译为：

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

我建议读一些关于CSS特性的书