CSS 我可以用一个选择器定位所有 <H> 标签吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7539125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I target all <H> tags with a single selector?
提问by SparrwHawk
I'd like to target all h tags on a page. I know you can do it this way...
我想定位页面上的所有 h 标签。我知道你可以这样做...
h1,
h2,
h3,
h4,
h5,
h6 {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
but is there a more efficient way of doing this using advanced CSS selectors? e.g something like:
但是有没有更有效的方法来使用高级 CSS 选择器来做到这一点？例如：
[att^=h] {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
(but obviously this doesn't work)
（但显然这不起作用）
采纳答案by Dave Markle
No, a comma-separated list is what you want in this case.
不，在这种情况下，您需要以逗号分隔的列表。
回答by Steve
It's not basic css, but if you're using LESS (http://lesscss.org), you can do this using recursion:
这不是基本的 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) will allow you to manage this, but won't allow recursion; they have @forsyntax for these instances:
Sass ( http://sass-lang.com) 将允许您管理它，但不允许递归；他们有@for这些实例的语法：
@for $index from 1 through 6 {
h#{$index}{
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
}
If you're not using a dynamic language that compiles to CSS like LESS or Sass, you should definitely check out one of these options. They can really simplify and make more dynamic your CSS development.
如果您没有使用像 LESS 或 Sass 这样的可以编译成 CSS 的动态语言，那么您绝对应该查看这些选项之一。它们可以真正简化您的 CSS 开发并使您的 CSS 开发更加动态。
回答by Ben Fleming
If you're using SASS you could also use this mixin:
如果你使用 SASS，你也可以使用这个 mixin：
@mixin headings {
h1, h2, h3,
h4, h5, h6 {
@content;
}
}
Use it like so:
像这样使用它：
@include headings {
font: 32px/42px trajan-pro-1, trajan-pro-2;
}
Edit:My personal favourite way of doing this by optionally extending a placeholder selector on each of the heading elements.
编辑：我个人最喜欢的方法是通过可选地在每个标题元素上扩展占位符选择器。
h1, h2, h3,
h4, h5, h6 {
@extend %headings !optional;
}
Then I can target all headings like I would target any single class, for example:
然后我可以像定位任何单个类一样定位所有标题，例如：
.element > %headings {
color: red;
}
回答by Imperative
SCSS+Compass makes this a snap, since we're talking about pre-processors.
SCSS+Compass 让这一切变得轻而易举，因为我们在谈论预处理器。
#{headings(1,5)} {
//definitions
}
回答by laggingreflex
Stylus's selector interpolation
Stylus的选择器插值
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
回答by Fabian Madurai
The jQuery selector for all h tags (h1, h2 etc) is " :header ". For example, if you wanted to make all h tags red in color with jQuery, use:
所有 h 标签（h1、h2 等）的 jQuery 选择器是“:header”。例如，如果您想使用 jQuery 将所有 h 标签设为红色，请使用：
$(':header').css("color","red")回答by Josh Habdas
To tackle this with vanilla CSS look for patterns in the ancestors of the h1..h6elements:
要使用 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>
If you can spot patterns you may be able to write a selector which targets what you want. Given the above example all h1..h6elements may be targeted by combining the :first-childand :notpseudo-classes from CSS3, available in all modern browsers, like so:
如果你能发现模式，你就可以编写一个针对你想要的选择器。鉴于上面的例子，所有h1..h6元素都可以通过结合CSS3 中的:first-child和:not伪类来定位，在所有现代浏览器中都可用，如下所示：
.row :first-child:not(header) { /* ... */ }
In the future advanced pseudo-class selectors like :has(), and subsequent-sibling combinators(~), will provide even more control as Web standards continue to evolve over time.
回答by Mattia Astorino
You can also use PostCSS and the custom selectors plugin
您还可以使用 PostCSS 和自定义选择器插件
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
article :--headings {
margin-top: 0;
}
Output:
输出：
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
margin-top: 0;
}
回答by DennisWPaulsenJR
You could .class all the headings in Your document if You would like to target them with a single selector, as follows,
如果您想使用单个选择器定位它们，您可以 .class 文档中的所有标题，如下所示，
<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>
and in the css
并在 css 中
.heading{
color: #Dad;
background-color: #DadDad;
}
I am not saying this is always best practice, but it can be useful, and for targeting syntax, easier in many ways,
我并不是说这始终是最佳实践，但它可能很有用，并且对于定位语法，在很多方面都更容易，
so if You give all h1 through h6 the same .heading class in the html, then You can modify them for any html docs that utilize that css sheet.
因此，如果您在 html 中为所有 h1 到 h6 提供相同的 .heading 类，那么您可以为使用该 css 表的任何 html 文档修改它们。
upside, more global control versus "section div article h1, etc{}",
与“section div article h1, etc{}”相比，更多的全局控制，
downside, instead of calling all the selectors in on place in the css, You will have much more typing in the html, yet I find that having a class in the html to target all headings can be beneficial, just be careful of precedence in the css, because conflicts could arise from
缺点是，不是在 css 中调用所有选择器，您将在 html 中输入更多内容，但我发现在 html 中使用一个类来定位所有标题可能是有益的，只是要注意优先级css，因为冲突可能来自
