Question

我正在使用WordPress并且今晚用这个CSS杀了我自己。我终于得到了如下工作方式，但我确信有一种方法可以清理它。我没有运气，格式化和重新格式化，尝试了几篇文章。无论如何，这是我的代码：

.postid-5648 #masthead {
    display: none;
}
.postid-5648 #colophon {
    display: none;
}
.postid-5365 #masthead {
    display: none;
}
.postid-5365 #colophon {
    display: none;
}

我已经尝试过这样的事情，没有运气：

.postid-5648, .postid-5365, #masthead, #colophon {
    display: none;
}

提前致谢！

Answer 1

Grouping selectors - 如果多个CSS选择器具有相同的CSS声明，则可以将它们组合在一起。

selector1, selector2, selector3,.................................. selectorN 
{property : value; .......... }

selector1，......... selectorN 是不同的选择器。请注意，这里的选择器用“，”组合器分隔。

.postid-5648 #masthead,
.postid-5648 #colophon,
.postid-5365 #masthead,
.postid-5365 #colophon {
  display: none;
}

Answer 2

如果您的课程以.postid-开头，您可以像这样使用*选择器，

[class*="postid-"] #masthead,
[class*="postid-"] #colophon {
   display: none;
}

[class*="postid-"] #masthead,
[class*="postid-"] #colophon {
   display: none;
}

<div class="postid-5648">
  <div id="colophon">colophon</div>
  <div id="masthead">masthead</div>
</div>
<div class="postid-5365">
  <div id="masthead">masthead</div>
  <div id="colophon">colophon</div>
</div>

Answer 3

您可以将它们组合在一起，如：

.postid-5648 #masthead,
.postid-5648 #colophon,
.postid-5365 #masthead,
.postid-5365 #colophon {
    display: none;
}

这使后续贡献者能够清楚地了解文档的流程。

只需浏览CSS Coding Standards

Answer 4

[attribute ^ = value]选择器匹配属性值以指定值开头的每个元素。

[class^="postid-"] #masthead,
[class^="postid-"] #colophon {
     display: none;
}

注意： [class*="postid-"]错误，因为接受xxpostidxx-5648。

我该如何简化这个CSS？

4 个答案: