Question

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

我可以使用!important解决问题，但我很感激理解为什么在没有这种情况下更改不会发生，尽管：悬停状态发生变化。

Answer 1

选择器具有不同的特异性值。它会影响覆盖优先级：

来自规范：

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

计算选择器中ID选择器的数量（= a）计数   中的类选择器，属性选择器和伪类的数量   选择器（= 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

计算选择器的特异性

为什么重写Spree默认样式是不一致的？

1 个答案: