这个CSS选择器有简写形式吗？

Question

我以前遇到过这种情况，一直在思考能否用更简单、不那么冗余的方式来写代码。

假设我们有以下HTML：

<div class="wrapperClass">
    <div class="someClass">
        <h1>This is a title</h1>
    </div>
</div>

如果我想要样式化 <h1> 元素，我会按照以下步骤进行：

.wrapperClass .someClass h1 { 
    color: red;
}

假设用户使用了 <h2>, <h3>, <h4>, <h5> 或者甚至是 <h6>，我们也需要覆盖这些情况。

我的 CSS 语句现在看起来像这样：

.wrapperClass .someClass h1, .wrapperclass .someClass h2, .wrapperClass .someClass h3 ...

这个声明非常长，所以我想知道是否有这类情况的缩写形式。

- Tim Gerhard

---

请看一下LESS或SASS。 - Gerard

这在标准 CSS 中实际上是不可能的，这也是为什么 CSS 预处理器如 LESS 和 SASS 变得流行的原因之一。 - Lie Ryan

CSS4已经解决了这个问题-https://developer.mozilla.org/en-US/docs/Web/CSS/:is - Paulie_D

Answer 1

目前还没有 任何标题 选择器，但有一种带有一定限制的替代方法：

.wrapperClass .someClass > *

它将匹配 任何 直接作为子元素的元素，该元素的父元素类名为 .someClass。

- Salman A

Answer 2

你可以使用Sass:

.wrapperClass {
  .someClass { 
    h1, h2, h3, h4, h5, h6 { 
      color: red;
    }
  }
}

- Praveen Kumar Tripathi

Answer 3

使用CSS和Sass/Scss。

/* Using space means any of its child element */
.className * {                <element class="className">
    pointer-events:none;        …
}                                 <element>
/* Using `>` symbol means immediate child element */
.className > * {              <element class="className">
    pointer-events:none;        <element>
}

.list > ul > li:only-child  {color:red}
.list > ul > li:first-child {color:green}
.list > ul > li:last-child  {color:blue}

.list > ul > li:nth-child(2)       {color:blue}
.list > ul > li:not(.className)    {color:blue}

CSS 选择器 定义了一组 CSS 规则适用的元素。

子合成器[A > B] « > 合成器选择作为第一个元素的直接子节点。
后代合成器[A B] « 空格合成器选择作为第一个元素的后代节点。
通用选择器[*] « * 匹配文档中的所有元素。

Sass « 带有超级功能的 CSS

在编写 HTML 时，您可能已经注意到它具有清晰的嵌套和可视化层次结构。而 CSS 则没有。

.className {
    .className2 {
        color: red;
        width: 600px / 960px * 100%;
    }
}

- Yash

Answer 4

你可以跳过一个父级元素并应用于特定元素，而不是应用于所有元素。对于特定元素，使用它比通用选择器更快速地查找。

.someClass h1, .someClass h2, ....{
  color: red;
}

- Sridhar

Answer 5

是的，你可以使用Sass来使这更容易，以下是使用Sass for循环的示例：

@for $i from 1 through 6 {
    .wrapperClass .someClass h#{$i} {
        color: red;
  }
}

将该代码片段粘贴到Sass playground中以检查输出结果：https://www.sassmeister.com/

- keyboard-warrior