102

我想要将所有h1..h6元素都定位到页面上。我知道你可以这样做...CSS目标所有H标签

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

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

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

如果不可能使用CSS3或4，有什么创意替代方案？

来源

2011-09-24 SparrwHawk

+1我真的很喜欢这个。当你尝试只选择输入[type = text]时，你会得到一个很长的输入列表[type = email]等等，这与它完全相同 –

当选择'h1 a：hover，h2 a：hover时，这会变得越来越单调乏味， h3 a：hover，h4 a：hover，...' – Vortico

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

来源

2011-09-24 12:52:08

谢谢你们，不幸的是，似乎没有简单的捷径。想想我会坚持用逗号分隔的列表。只是想知道我是否错过了一些显而易见的事物...... – SparrwHawk

事实上，事实并没有激发人们的想象力和刺激创造力。 –

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

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

萨斯（http://sass-lang.com）将允许你管理这个，但不会允许递归;他们对这些情况@for语法：

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

如果你不使用编译为像LESS或萨斯CSS的动态语言，你一定要看看这些选项之一。他们可以真正简化并使您的CSS开发更具动态性。

来源

2013-05-06 02:33:00 Steve

+1以内。 less是非常强大的 – Vnge

这将是伟大的风格也是一个参数，所以你可以使用它以外的其他字体：D –

我很确定手动输入比创建循环在CSS像h1，h2，h3 ...需要更少的时间，空间..现在和以后都会更清楚地理解。 –

如果您使用SASS你也可以使用这个mixin的：

@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; 
}

来源

2014-02-07 08:18:16

现在我希望我为这个项目选择了SASS ..：P – Bill

这是从SCSS到SCSS + Compass的一小步：http://compass-style.org/reference/compass/helpers/selectors/ - headings（ $ from，$ to） – Imperative

哇，在这两年后遇到了..而编辑看起来很棒！我敢肯定我明白扩展上的'！optional'标志的作用是什么？并且似乎无法在Google上找到任何内容... – Bill

SCSS +指南针使这是一个瞬间完成，因为我们正在谈论的预处理器。

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

You can learn about all the Compass helper selectors here：

来源

2014-12-04 08:11:06 Imperative

Stylus的selector interpolation

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

来源

2015-06-04 19:33:52 laggingreflex

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

如果您可以点样你可以写一个选择器来定位你想要的东西。鉴于上面的例子中所有h1..h6元素可以由:first-child和:not伪类从CSS3结合有针对性，可在所有现代浏览器，像这样：

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

在未来先进伪类选择像:has()，和随着Web标准的不断发展，它将提供更多的控制。

来源

2017-09-29 06:11:22

CSS目标所有H标签

回答

Stylus的selector interpolation

相关问题