为什么覆盖 Spree 默认样式不一致？答案

【问题标题】：Why overriding Spree default styles is inconsistent?为什么覆盖 Spree 默认样式不一致？
【发布时间】：2014-05-12 02:51:04
【问题描述】：

我正在为默认 Spree 模板制作 SCSS 覆盖文件。在产品目录显示页面上，每个产品图像周围都有一个边框。如果我更改 product-image 类的基本状态的边框属性，则没有任何变化。但是，如果我为 product-image:hover 添加更改，它可以正常工作。

我可以使用 !important 解决问题，但我很高兴能理解为什么没有它就无法完成更改，尽管 :hover 状态发生了变化。

【问题讨论】：

您的样式可能没有生效，因为具有更高 CSS 优先级的东西指定了不同的样式。

标签： ruby-on-rails sass spree

【解决方案1】：

选择器具有不同的特异性值。它会影响压倒一切的优先级：

来自规范：

选择器的特异性计算如下：

count the number of ID selector in the selector (= a) count the 类选择器、属性选择器和伪类的数量选择器 (= b) 计算类型选择器的数量和选择器中的伪元素 (= c) 忽略通用选择器否定伪类中的选择器与其他选择器一样计算，但否定本身不算作伪类。

连接三个数字 a-b-c（在具有大 base) 给出了特异性。

例子：

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

您可以使用this tool计算选择器特异性

【讨论】：

这似乎一针见血，非常感谢。不知道元素的数量会对优先级产生影响。
@TheMinimalCriminal 这很有意义，因为您可以为某个组的所有元素指定行为并通过引用最具体的元素来覆盖它。例如：“所有猫（物种）都有皮毛。斯芬克斯（品种）没有。”