Question

有人知道如何缩短CSS代码吗？

body.term-hmk .site-header, body.term-hmk .main-navigation ul ul, body.term-hmk .secondary-navigation ul ul, body.term-hmk .main-navigation ul.menu > li.menu-item-has-children::after, body.term-hmk .secondary-navigation ul.menu ul, body.term-hmk .main-navigation ul.menu ul, body.term-hmk .main-navigation ul.nav-menu ul {
background-color: #ffeeff}

body.term-dtq .site-header, body.term-dtq .main-navigation ul ul, body.term-dtq .secondary-navigation ul ul, body.term-dtq .main-navigation ul.menu > li.menu-item-has-children::after, body.term-dtq .secondary-navigation ul.menu ul, body.term-dtq .main-navigation ul.menu ul, body.term-dtq .main-navigation ul.nav-menu ul {
background-color: #9c9e9f !important;}

不幸的是，为我的所有网站写这个都需要很长时间，所以如果有更好的解决方案，请告诉我。

Answer 1

你能尝试使用你想要的所有风格东西的包装DIV（或跨度），然后只将那个div放在你想要设计的东西上吗？

例如

.style1 {
  background-color: #ffeeff
}

然后把它放在你想要的样式

<div class=style1>
  [stuff to style]
</div>

这样你只需要将div放在想要样式的东西周围，这要短得多。

Answer 2

如果您赞同HTML应该只用于标记的理念，而不是包含样式信息那么多，但是如果您愿意为所需的所有元素添加一个额外的类background-color要申请的财产，你可以：

.some-class {
    background-color: #ffeeff;
}

或者你可以让选择器更简洁，你需要body.term-dtq .side-header吗？您是否可以使用.term-header

这样的唯一类名更简洁

上述问题无法轻易修复，但您可以通过删除不必要的选择器长度来修复它。

Answer 3

现在看起来像这样

.term-xx .site-header, 
.term-xx .main-navigation ul, 
.term-xx .secondary-navigation ul, 
.term-xx .widget_shopping_cart_content, 
.term-xx .site-footer {
  background-color: #ffeeff !important;
}

现在它更加紧凑。

那么.term-xx在所有这些类上都没有缩短的代码选项吗？

我需要.term-xx，因为我需要在多个页面上使用不同的页眉和页脚背景颜色。所以.term-xx在Body中并且对个别页面进行了分割。

如果这很重要，那就是Wordpress安装。

用很多类缩短CSS

3 个答案: