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

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*/
}

Answer 4

你必须这样做：

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

}

没有比用“，”

分隔的选择器链接更短的方法了