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

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 {

}

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

score 2 · Accepted Answer

这是使用 CSS 预处理器（如 SASS/SCSS）的主要用例。在 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/

score 0 · Accepted Answer

这是最可靠的形式：

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

score 0 · Accepted Answer

你必须这样做：

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

}

没有比用 ',' 分隔的链接选择器更短的方法了

score 0 · Accepted Answer

试试:notcss选择器：

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

4 回答 4