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伪选择器？

谢谢！

- Jacob Birkett

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>

另外，您需要在伪元素::before中使用双冒号（在CSS3中更新）。

• 参考: 伪元素文档

- Wes Foster

---

CSS 伪选择器（或内容）只需要一个冒号。只有伪元素需要使用 ::。 （我查了一下确保无误：https://dev59.com/flgR5IYBdhLWcg3wBZS3#41867706）谢谢！这是一个好答案。 - Jacob Birkett