SCSS（SASS）セレクタはネストされたクラスの問題を順序付けします

Question

ここでは、リスト項目をスタイルするSCSSがあります。私が疑問に思っているのは、クラスと疑似セレクタの選択の順序です。だから基本的に&:before.activeは&.active:beforeと同じですか？ここで

は、後者の完全な例です：

.sidebar-list { 
    list-style-type: none; 
    padding: 0; 

    & li { 
    padding: 4px 0; 

    &:before {      // Here, 
     color: darken($font-color, 60%); 
     font-family: "FontAwesome"; 
     content: "\f101\00a0"; 
    } 

    &.selected:before {    // And here. 
     color: darken($font-color, 30%); 
    } 
    } 
} 

そして（li内）重要一部の旧：

1は :beforeをスタイリングのための正しいだろう

&:before {     // Here, 
     color: darken($font-color, 60%); 
     font-family: "FontAwesome"; 
     content: "\f101\00a0"; 

     &.selected {    // And here. This would evaluate to "li:before.selected" 
     color: darken($font-color, 30%); 
     } 
    } 

リスト項目のpsuedo-selector？

ありがとうございます！

Answer 1

はい、注文は問題ありません。 li:before.selectedは無効であるため、基本的に無視されます。

はここで例えば抜粋です：また

span::before { 
 
    content:'span::before (Normal)'; 
 
    background-color: #ddd; 
 
} 
 

 
/* Valid */ 
 
span.ribbon::before { 
 
    content: "span.ribbon::before (Valid)"; 
 
    background-color: #0f0; 
 
} 
 

 
/* Invalid. Will be ignored */ 
 
span::before.ribbon { 
 
    content: "span::before.ribbon (Invalid)"; 
 
    background-color: #f00; 
 
}

<span></span> 
 
<span class="ribbon"></span>

、あなたは（CSS3で更新）::before擬似要素のための二重コロンを使用することをお勧めします。

• 参考：Pseudo Element Docs