Css 区别于&；。类别vs&。班

&类与类：在两者之间放置一个空格是否会有所不同

在我的sass文件中，我有以下代码：

.parentClass{
&.childClass{}
}

他们希望我在childClass和“&”符号之间留出一个空格：

.parentClass{
&.childClass{}
}

---

这有什么区别吗？

区别在于：

.parentClass {
  &.childClass {}
}

将实际生成选择器

.parentClass.childClass

，这意味着您正在为同时具有两个类的元素进行选择，例如

。这可能不是您想要的情况。同时，这：

.parentClass {
  & .childClass {}
}

将编译为：

.parentClass .childClass {}

…它将选择类为

childClass

的元素，该元素是类为

parentClass

的元素的子元素，例如：

<div class="parentClass">
    <div class="childClass"></div>
</div>

---

…这也为您提供了

.parentClass.childClass{}

区别在于：

.parentClass {
  &.childClass {}
}

将实际生成选择器

.parentClass.childClass

，这意味着您正在为同时具有两个类的元素进行选择，例如

。这可能不是您想要的情况。同时，这：

.parentClass {
  & .childClass {}
}

将编译为：

.parentClass .childClass {}

…它将选择类为

childClass

的元素，该元素是类为

parentClass

的元素的子元素，例如：

<div class="parentClass">
    <div class="childClass"></div>
</div>

---

…这也为您提供了

.parentClass.childClass{}

对于第二种情况，放置“&”符号没有意义，因为

.parentClass {
  & .childClass {}
}

及

将生成与以下相同的已编译CSS：

.parentClass .childClass {
}

---

对于第二种情况，放置“&”符号没有意义，因为

.parentClass {
  & .childClass {}
}

及

将生成与以下相同的已编译CSS：

.parentClass .childClass {
}

---

检查这个检查这个…这使得

&.childClass

中的

&

确实是多余的。@deceze在OP的简化示例中，肯定是：）但是，如果OP想要根据父类上的任何其他附加条件筛选选择器，那么

&

将是必需的，例如

&[title=“foo”].childClass

；）当然，只有在

&…

情况下才是冗余的。这是元素编号的子元素。它将选择一个作为子元素的元素，而不必是子元素（这需要

子选择器）。否则，答案很好。……这使得

&.childClass

中的

&

确实是多余的。@deceze在OP的简化示例中，肯定是：）但是，如果OP想要根据父类上的任何其他附加条件筛选选择器，那么

&

将是必需的，例如

&[title=“foo”].childClass

）当然，只有在

&…

情况下才是冗余的。这是元素编号的子元素。它将选择一个作为子元素的元素，而不必是子元素（这需要

子选择器）。否则，答案很好。