CSS目标所有H标签

我想定位一个页面上的所有h1..h6元素。 我知道你可以这样做…

 h1, h2, h3, h4, h5, h6 { font-size: 1.2em; } 

这可以使用CSS3或CSS4来实现吗？ 例如：

 [att^=h] { font-size: 1.2em; } 

如果不能用CSS3或4，那么有什么创意的select？

Answer 1

不，在这种情况下，用逗号分隔的列表就是你想要的。

Answer 2

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

 .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 ）将允许您pipe理这个，但不会允许recursion; 他们有@for这些实例的语法：

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

如果你不使用像LESS或者Sass这样的编译成CSS的dynamic语言，那么你一定要看看其中的一个选项。 他们可以真正简化并使您的CSS开发更加dynamic。

Answer 3

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

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

像这样使用它：

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

---

编辑：我个人最喜欢的方式，通过在每个标题元素上select性地扩展一个占位符select器。

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

然后，我可以定位所有标题，例如我将针对任何一个class级，例如：

 .element > %headings { color: red; } 

Answer 4

由于我们正在讨论预处理器，所以SCSS + Compass使得这一点很简单。

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

你可以在这里了解到所有的Compass helperselect器 ：

Answer 5

手写笔的select器插补

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

Answer 6

用香草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> 

如果你能发现模式，你可以写一个select器来定位你想要的东西。 考虑到上面的例子，所有h1..h6元素都可以通过组合CSS3中的:first-child和:not伪类来实现，可以在所有现代浏览器中使用，如下所示：

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

在未来的高级伪类select器（如:has()和后续同级组合器 （ ~ ）中，将随着Web标准的不断发展而提供更多控制。