css - CSS样式化多个ID

Question

而不是这个：

#1 span.error { color: #fff; }
#2  span.error { color: #fff; }

使用它是否更好/更快：

#1 span.error, #2 span.error { color: #fff; }

有没有办法缩短更多？

我接受了 Ana 的回答，但对我来说，agam360 首先击中了目标。谢谢你们

Answer 1

是的，我相信这样更好——你可以避免冗余，如果你多次遇到这种情况，它可以显着减少 CSS 的大小。

更短的方法是将相同的类添加到两个 id。就像是：

<div id="#1" class="myclass">
  <span class="error">error text 1</span>
</div>
<div id="#2" class="myclass">
  <span class="error">error text 1</span>
</div>

然后你可以写：

.myclass span.error {
  color: #fff;
}

如果您在具有 id和span.error的元素之外没有任何#1#2元素，那么您可以将其进一步压缩为span.error { color: #fff; }

如果除此之外，具有类的元素.error总是<span>元素，它们就会变成.error { color: #fff; }

所以你能压缩多少东西真的取决于你的 HTML 结构。

Answer 2

取决于你的页面结构。

span.error { color: #fff; }会进一步缩短它，或者如果祖先需要在规则中并遵循一个模式，你可以写一些 this div[id*='pattern'] span.error。在这个例子中，祖先是一个div包含文本“模式”的 id。您可以对其进行修改以满足您的需要。