SCSS 到 CSS，使用属性选择器的嵌套标签/类的特异性？答案

【问题标题】：SCSS to CSS, specificity around nested tags/classes with Attribute Selectors Applied?SCSS 到 CSS，使用属性选择器的嵌套标签/类的特异性？
【发布时间】：2018-01-08 21:22:10
【问题描述】：

我将.spin 应用于<i>：它正在旋转一个图标。该图标已经应用了transform，因此.spin 将具有原始transform 加上rotate 一个：

第一种方法不起作用，因为原始的transform 优先。我想知道为什么第二种方法有效？

注意：编译时使用Angular，所以使用Shadow Dom Emulation

// SCSS
.menu-button {    
    i {        
        transform: translate(-50%, -50%);        
    }
}
i.spin {
    transform: translate(-50%, -50%) rotate(90deg);
}


// CSS Compiled (compiled with Angular, so using Shadow Dom Emulation)
.menu-button[_ngcontent-c4] { }

.menu-button[_ngcontent-c4] i[_ngcontent-c4] {
    transform: translate(-50%, -50%);
}

i.spin[_ngcontent-c4] {  
    transform: translate(-50%, -50%) rotate(90deg); 
}

将其更改为以下工作 - 不知道为什么

// SCSS
.menu-button {    
    i {        
        transform: translate(-50%, -50%);    
        &.spin {
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }
}

// Compiled CSS
.menu-button[_ngcontent-c4] {}

.menu-button[_ngcontent-c4] i[_ngcontent-c4] {
    transform: translate(-50%, -50%);
}
.menu-button[_ngcontent-c4]   i.spin[_ngcontent-c4] {  
    transform: translate(-50%, -50%) rotate(90deg); 
}

【问题讨论】：

标签： css sass

【解决方案1】：

这实际上与 SCSS 或 Angular 没有任何关系，而只是与 CSS 优先规则有关。

在您的第一种方法中，前一个规则更具体，因此优先于后者。

【讨论】：