Stylus＆＃39; s selector interpolation

Question

我想定位页面上的所有h标签。我知道你可以这样做......

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

但使用高级CSS选择器是否有更有效的方法？例如：

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

（但显然这不起作用）

Answer 1

不，在这种情况下，您可以使用以逗号分隔的列表。

Answer 2

这不是基本的CSS，但是如果你使用LESS（http://lesscss.org），你可以使用递归来做到这一点：

.hClass (@index) when (@index > 0) {
    h@{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Sass（http://sass-lang.com）将允许您管理它，但不允许递归;他们对这些实例有@for语法：

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

如果您没有使用像LESS或Sass那样编译为CSS的动态语言，那么您一定要查看其中一个选项。它们可以真正简化并使CSS开发更具动态性。

Answer 3

如果你正在使用SASS，你也可以使用这个混音：

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

像这样使用它：

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

编辑：我个人最喜欢的方式是通过选择性地在每个标题元素上扩展占位符选择器来实现这一目的。

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

然后我可以像所有单个类一样定位所有标题，例如：

.element > %headings {
    color: red;
}

Answer 4

SCSS +指南针使这一点变得轻而易举，因为我们正在谈论预处理器。

#{headings(1,5)} {
    //definitions
  }

You can learn about all the Compass helper selectors here：

Answer 5

Stylus＆＃39; s selector interpolation

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;

Answer 6

要解决这个问题，请使用vanilla CSS查找h1..h6元素祖先中的模式：

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

如果您可以发现模式，您可以编写一个针对您想要的选择器。鉴于上面的示例，可以通过组合CSS3中的:first-child和:not伪类来定位所有h1..h6元素，这些伪类在所有现代浏览器中都可用，如下所示：

.row :first-child:not(header) { /* ... */ }

将来，高级伪类选择器（如:has()和subsequent-sibling combinators（~）将随着Web标准的不断发展而提供更多控制。

Answer 7

如果您希望使用单个选择器来定位它们，则可以对文档中的所有标题进行.class

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

和css

.heading{
    color: #Dad;
    background-color: #DadDad;
}

我并不是说这总是最佳做法，但是它可能很有用，而且在许多方面更容易确定语法目标，

因此，如果您在html中为所有h1到h6赋予相同的.heading类，则可以为使用该CSS工作表的任何html文档修改它们。

与“ section div article h1，etc {}”相比，

不利的一面是，与其在css中调用所有选择器，不如在html中键入更多内容，但我发现在html中具有一个以所有标题为目标的类可能会有所帮助，请注意优先级，因为

可能会引起冲突

Answer 8

所有h标签（h1，h2等）的jQuery选择器都是“：header”。例如，如果要使用jQuery将所有h标签变成红色，请使用：

$(':header').css("color","red")

Answer 9

新的:is() CSS pseudo-class可以在一个选择器中完成：

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}

Answer 10

您还可以使用PostCSS和custom selectors plugin

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

输出：

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

Answer 11

是的，您可以使用通配符。

示例：

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

这会将所有边距和填充都重置为0。

我可以使用单个选择器定位所有<h>标签吗？</h>

11 个答案:

Stylus＆＃39; s selector interpolation