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

是的，您提供的代码可以按预期工作-可以编译为以下代码：

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

<h1>I'm a heading 1 without parents</h1>
<h2>I'm a heading 2 without parents</h2>
<h3>
 <h2>I'm a heading 2 inside a heading 3</h2>
</h3>

其中指出：

某处具有父级h1，h2，h3或h4的任何h2元素都不会在顶部显示填充。

我建议不要使用暗示的HTML结构，因为它在语义上不正确，并且无法正确呈现。一个更有效的选择是使用以下代码：

/* SASS raw input

h1, h2, h3, h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;

    & ~ h2 {
        margin-top: 0;
    }
}
*/

/* Pure CSS input */

/* Avoid margin collapse for example, not required */
div {
  display: flex;
  flex-flow: column nowrap;
}

h1, h2, h3, h4 {
  margin-top: 20px;
  margin-bottom: 20px;
  color: red;
}
h1 ~ h2, h2 ~ h2, h3 ~ h2, h4 ~ h2 {
  margin-top: 0;
}

<div>
  <h1>I'm a heading 1 in a div</h1>
  <h2>I'm a heading 2 with a previous sibling that is an h1</h2>
  <h3>I'm a heading 3 with two previous siblings</h3>
<div>
<h2>I have no siblings, as a heading 2</h2>

Answer 2

您在此处编写的内容并不是了解您要尝试执行的操作的好方法。在您的第一个代码段中：

.test,
.test-two {
     /* ... I assume there would be other shared styles here ... */
     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的更多信息：https://sass-lang.com/documentation/at-rules/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;
        }
    }
}

希望这会有所帮助。如果我没有达到您的期望目标，那么如果您提供更多详细信息，我很乐意修改我的答案。

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

2 个答案: