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> or even a <h6>，我们也需要涵盖这些情况。

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

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

这句话真的很长；这就是为什么我想知道是否有这类案件的简短形式。

Answer 1

（当前）没有任何标题选择器，但是有一定限制的替代方法是：

.wrapperClass .someClass > *

它将匹配作为.someClass的直接子元素的任何元素。

Answer 2

您可以使用Sass：

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

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 selectors定义了一组CSS规则所适用的元素。

Child combinator [A> B]«>组合器选择作为第一个元素的直接子代的节点。
Descendant combinator [AB]«（空格）组合器选择作为第一个元素的后代的节点。
Universal selector [*]«*将匹配文档的所有元素。

Sass«具有超能力的CSS

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

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

Answer 4

您可以跳过子元素的一个父类，并且需要应用特定元素，而不是所有元素都适用。与通用选择器相比，它找到的特定元素可以进行快速比较。

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

Answer 5

是的，您可以使用Sass简化此操作，这是使用Sass for循环的示例：

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

将代码段粘贴到此处的Sass游乐场以检查输出：https://www.sassmeister.com/

此CSS选择器是否有简短的格式

5 个答案: