问题描述
我正在为默认的 Spree 模板制作一个 SCSS 覆盖文件.在产品目录显示页面上，每个产品图像都有一个边框.如果我更改 product-image 类的基本状态的边框属性，则不会发生任何变化.但是，如果我为 product-image:hover 添加更改，则它可以正常工作.
I am making an SCSS override file for the default Spree template. On the product catalogue display page there is a border around each product image. If I change the border properties for the base state of the product-image class, nothing changes. However if I add an alteration for product-image:hover it works without an issue.
我可以使用 !important 解决这个问题，但我很高兴能理解为什么没有它，即使 :hover 状态发生变化，更改也不会通过.
I can resolve the problem using !important but I'd be grateful to understand why the change doesn't go through without that, despite the :hover state changing.
推荐答案
选择器具有不同的特异性值.它会影响覆盖优先级:
Selectors have different specificity value. It affects overriding priority:
来自规范:
选择器的特异性计算如下:
计算选择器中的ID选择器的数量(= a)类选择器、属性选择器和伪类的数量选择器 (= b) 计算类型选择器的数量和选择器中的伪元素 (= c) 忽略通用选择器否定伪类中的选择器与其他选择器一样计数，但否定本身不算作伪类.
count the number of ID selectors in the selector (= a) count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b) count the number of type selectors and pseudo-elements in the selector (= c) ignore the universal selector Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.
连接三个数字 a-b-c(在具有大base) 给出了特异性.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
示例:
* /* 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 */
您可以使用这个工具
这篇关于为什么覆盖 Spree 默认样式不一致?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！