嵌套类的 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内）：

    &: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 psuedo-selector 样式，哪一个是正确的？

谢谢！

Answer 1

是的，顺序很重要。 li:before.selected 基本会被忽略，因为它是无效的。

这里有一个 sn-p 示例：

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 中更新）。

• 参考：Pseudo Element Docs