这里我使用 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
内):
&: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%);
}
}
对于列表项的 :before
伪选择器的样式,哪一个是正确的?
谢谢!
最佳答案
是的,顺序很重要。 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>
另外,您需要为 ::before
伪元素(在 CSS3 中更新)使用双冒号。
关于css - SCSS(SASS)选择器顺序对嵌套类是否重要,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44727665/