SASS：检查元素类型内的元素类型

Question

是否可以检查元素类型 中 的元素类型？这对我来说似乎是一个常见问题，但我在 Stack Overflow 上找不到这个问题。

例如：

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;

    & h2 {
        margin-top: 0;
    }
}

我知道同样的事情适用于以下类：

.test,
.test-two {
     color: red;

     &.test {
         color: blue;
     }
}

在这种情况下，我可以在父类中覆盖 .test。同样的事情不适用于上面示例中的元素类型。

PS：我不是要修复此 HTML（这只是一个示例），而是要找到嵌套元素类型的方法。

先感谢您！

Answer 1

您在这里所写的内容并不是实现您正在尝试做的事情的好方法。在你的第一个片段中：

.test,
.test-two {
     /* ... Other shared styles ... */
     color: red;

     &.test {
         color: blue;
     }
}

听起来您想要做的事情是在test使用与不同选择器共享的一些其他属性设置类的颜色后覆盖该类的颜色。但是，请考虑一下您所编写的内容将编译为：

.test,
.test-two {
    color: red;
}

.test.test,
.test-two.test {
    color: blue;
}

所以，现在你有了一个复合类选择器，上面有两个相同的类，这是不必要的。然后这里还有另一个选择器，您很可能根本不需要。您希望避免添加不必要的特异性并输出无效或无用的代码。在这个例子中，编译后你应该看到的 CSS 是这样的：

.test,
.test-two {
    /* ... Other shared styles ... */
    color: red;
}

.test {
    color: blue;
}

好的低特异性选择器利用级联中的选择器优先级。在 SCSS 中，您只需编写完全相同的内容即可。尝试将其表述为嵌套选择器确实没有任何好处，因为这样做要么会产生更糟糕的代码，要么会变得不必要的复杂。但是，如果出于某种原因您认为该部分需要嵌套，一个简单的方法是使用@at-root. 就像这样：

.test,
.test-two {
    color: red;

    @at-root {
        .test {
            color: blue;
        }
    }
}

如果您想了解更多信息，可以访问@at-root 的文档。

这让我明白了你问题的实质内容。同样，您想要覆盖样式的方式主要是使用选择器优先级，而不是开始参与不断增加的特异性级别，这会使代码变得过于复杂和庞大，导致过度使用!important，并引发特异性选择器战争，从而导致不必要的结果性能较差的长选择器。

所以在这个片段中：

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;

    & h2 {
        margin-top: 0;
    }
}

如果您想要做的只是覆盖样式h2，那么您希望在编译后看到的 CSS 应该是这样的：

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;
}

h2 {
    margin-top: 0;
}

但是，您当前正在做的事情在编译后将如下所示：

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;
}

h1 h2,
h2 h2,
h3 h2,
h4 h2 {
    margin-top: 0;
}

就像第一个示例一样，可能没有充分的理由像这样嵌套这些选择器。要么这样做（与所需的 CSS 输出相同）：

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;
}

h2 {
    margin-top: 0;
}

或者如果您坚持使用嵌套，您可以@at-root像我在第一个示例中所做的那样使用：

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;
    
    @at-root {
        h2 {
            margin-top: 0;
        }
    }
}

希望这会有所帮助。如果我偏离了您的预期目标，如果您提供更多详细信息，我将很乐意修改我的答案。