当类是两个父类中任何一个的子类时，如何将规则应用于类？

Question

我父母是.category-view和.search-results。

其中每一个都可以有我想要样式化的子.special-price。

但我不想设计.product-view .special-price的样式。

我必须像这样拼写多个路径：

.category-view .special-price, .search-results .special-price {

}

或者有没有更短的方法，比如

.category-view/.search-results .special-price {

}

此外，我实际上想同时使用.special-price和.old-price，那么有什么方法可以做到吗？喜欢

.category-view/.search-results .special-price/.old-price {

}

..。当他们低于父母中的任何一个时，会影响到这两个孩子吗？

Answer 1

这是使用像SASS/SCSS这样的CSS预处理器的主要用例。在SCSS中，您可以指定以下嵌套规则：

.category-view, 
.search-results {

    .special-price,
    .old-price {
        /* ... */
    }
}

嵌套规则有助于在编写样式表时避免重复。CSS的最终输出将为您提供所需的规则：

.category-view .special-price, 
.category-view .old-price, 
.search-results .special-price,
.search-results .old-price {
        /* profit */
}

CSS预处理器的主要目的是帮助您更有效地编写样式表，这是您问题的根源。我会强烈地考虑到SASS/SCSS来满足您的需求。查看此处：http://sass-lang.com/

Answer 2

尝试:not css选择器：

.special-price:not(.product-view)
{
}

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:not

JSFiddle：http://jsfiddle.net/b2bjJ/

Answer 3

这是最可靠的形式：

.category-view .special-price,
.search-results .special-price,
.category-view .old-price,
.search-results .old-price {
/*STYLE*/
}