Question

我有这样的事情：

<div id="attributes1"><span class="heading_fieldset"></div>
<div id="attributes2"><span class="heading_fieldset"></div>

和

#attributes1 .heading_fieldset {
    display:inline-block;
    width: 30px;
}
#attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

如何将CSS分组为类似（下一个CSS不好......它弄乱了我的页面）：

#attributes1, #attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

谢谢

Answer 1

你会使用：

#attributes1 .heading_fieldset, #attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

您尝试将这些属性添加到元素：#attributes1和.heading_fieldset，其父级为#attributes2。

我不知道您要尝试做什么的完整背景，因此可能不起作用 - 但是，您可能只需将这些属性应用于.heading_fieldset而无需选择父级。这将减少一些冗余。

Answer 2

在这种情况下，我使用类

HTML：

<div class="attributes"><span class="heading_fieldset"></div>
<div class="attributes"><span class="heading_fieldset"></div>

CSS：

.attributes > .heading_fieldset {
    display:inline-block;
    width: 30px;
}

但是，如果您真的需要ID，请使用

<div id="attributes1" class="attributes"><span class="heading_fieldset"></div>
<div id="attributes2" class="attributes"><span class="heading_fieldset"></div>

这可能是重复的，但我更喜欢那个比糟糕且难以理解的样式表

Answer 3

我会说你也应该坚持上课。保存ID用于javaScript交互或特殊事物。通过这种方式，您可以设置所有.attribute相同的样式 - 然后.thing01或其他任何内容以获得更具体的样式。你的跨度没有关闭，所以这是一个问题。此外，如果它们真的是标题，您可能应该使用标题标记。 jsFiddle: - 你真正需要的是重新思考一点CSS并记住它基本上从右到左阅读。因此，当你写道：.thing .other-thing h1 { } upi正在说，“将这些样式应用于'所有h1里面的东西。其他东西，里面是东西。'我希望有所帮助！

HTML

<div class="attribute thing01">
  <h2>Your heading</h2>
</div>

<div class="attribute thing02">
  <h2>Your heading</h2>
</div>

CSS

.attribute {
  display:inline-block;
  width: 30px;
  /* example CSS */
  border: 1px solid red;
  padding: .5em;
}

.thing01 {
  background-color: red;
}

.thing02 {
  background-color: lightblue;
}

.attribute h2 {
  font-size: 1.5em;
}

Css分组多个id的类

3 个答案: