1

我有这样的事情：

<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;
}

谢谢

4

3 回答 3

4

你会使用：

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

您试图将属性添加到元素：#attributes1，并且.heading_fieldset具有#attributes2.

我不知道您要执行的操作的完整上下文，因此这可能不起作用 - 但是，您可能只需将这些属性应用于.heading_fieldset而无需选择父级。这将减少一些冗余。

于 2013-10-20T02:06:16.683 回答
1

在这种情况下，我使用类

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>

这可能是重复的，但我更喜欢它而不是一个糟糕且不可读的样式表

于 2013-10-20T02:16:33.593 回答
1

我会说你也应该坚持上课。保存用于 JavaScript 交互或特殊事物的 ID。通过这种方式，您可以.attribute使用相同的样式 - 然后.thing01或其他任何方式来获得更具体的样式。你的跨度没有关闭，所以这是一个问题。此外，如果它们确实是标题，您可能应该使用标题标记。jsFiddle: - 你真正需要的是重新思考一下 CSS 并记住它基本上是从右到左读的。所以当你写的时候：.thing .other-thing h1 { }upi 是在说，“将这些样式应用到 '.other-thing 内部的所有 h1'，也就是 .thing 内部的所有 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;
}
于 2013-10-20T04:19:15.257 回答