SCSS （SASS）选择器顺序对嵌套类是否重要-解网

问：

在这里，我有 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

谢谢！

CSS的飒爽的 css-selectors

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

参考：伪元素文档

SCSS （SASS）选择器顺序对嵌套类是否重要

Does SCSS (SASS) selector order matter for nested classes

评论

评论

SCSS （SASS） 选择器顺序对嵌套类是否重要

Does SCSS (SASS) selector order matter for nested classes

评论

评论

SCSS （SASS）选择器顺序对嵌套类是否重要