当前位置： 文江博客话题详情

我可以定位所有吗？带有单个选择器的标签？

发布于 2024-12-06 10:25:30 字数 278 浏览 0 评论 0原文

我想定位页面上的所有 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;
}

但显然这不起作用）

原文

I'd like to target all h tags on a page. I know you can do it this way...

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:

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

(but obviously this doesn't work)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（12）

司马昭之心 2024-12-13 10:25:30

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

例如，以下是如何定位容器元素内的所有标题：

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

大多数浏览器现在支持 :is()，但请记住，2020 年之前制作的大多数浏览器在没有前缀的情况下不支持它，因此，如果您需要支持较旧的浏览器，请谨慎使用此功能。

在某些情况下，您可能想使用 :where () 伪类，与 :is() 非常相似，但具有不同的特异性规则。

The new :is() CSS pseudo-class can do it in one selector.

For example, here's how you could target all headings inside a container element:

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

Most browsers now support :is(), but keep in mind that most browsers made before 2020 didn't support it without a prefix, so be careful about using this if you need to support older browsers.

In some cases, you may instead want to use the :where() pseudo-class, which is very similar to :is() but has different specificity rules.

回复 原文
战皆罪 2024-12-13 10:25:30

如果您使用 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;
}

If you're using SASS you could also use this 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;
}
回复 原文
久隐师 2024-12-13 10:25:30

它不是基本的 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 开发并使其更加动态。

It's not basic css, but if you're using LESS (http://lesscss.org), you can do this using 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) will allow you to manage this, but won't allow recursion; they have @for syntax for these instances:

@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.

回复 原文
小姐丶请自重 2024-12-13 10:25:30

这是我尝试仅使用（现代）CSS 来解决这个问题。

背景：在 Joplin（非常好的笔记应用程序，链接）内部，有一个 userfile.css，您可以在其中编写自定义 CSS 以显示和导出 Markdown 笔记。

我想定位所有标题直接位于（相邻同级）某些标签之后，即p、ul、ol 和 nav 在两者之间添加边距。因此：

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6  {
  margin-top: 2em;
}

哇。很长。这样的选择器。

然后我来到这里，学习并尝试：

p   + :is(h1, h2, h3, h4, h5, h6),
ul  + :is(h1, h2, h3, h4, h5, h6),
ol  + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

嗯。短得多。很好。

然后，我突然想到：

:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

耶，这也行！太棒了！

这也可以与 :where() 或其他 CSS 组合器（例如 ~ 甚至 （空格）一起使用）来创建CSS 选择器的“矩阵”而不是很长的列表。

致谢：本页上所有引用 :is() 选择器的答案。

Here is my attempt to solve this problem with (modern) CSS only.

Context : Inside of Joplin (very nice note taking app, link), there is an userfile.css in which you can write your custom CSS for display and export of markdown notes.

I wanted to target all headings directly after (adjacent sibling) certain tags, namely p, ul, ol and nav to add a margin in between. Thus :

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6  {
  margin-top: 2em;
}

WOW. Very long. Such selectors.

I then came here, learnt, and tried :

p   + :is(h1, h2, h3, h4, h5, h6),
ul  + :is(h1, h2, h3, h4, h5, h6),
ol  + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

Hmm. Much shorter. Nice.

And then, it struck me :

:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

Yay, this also works! How amazoomble!

This might also work with :where() or other CSS combinators like ~ or even (space) to create "matrix" of CSS selectors instead of very long lists.

Credits : all the answers on this page referencing the :is() selector.

回复 原文
白云悠悠 2024-12-13 10:25:30

所有 h 标签（h1、h2 等）的 jQuery 选择器是“ :header ”。例如，如果您想使用 jQuery 将所有 h 标签设为红色，请使用：

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

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:

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

回复 原文
原来分手还会想你 2024-12-13 10:25:30

纯 CSS

使用纯 CSS，您有两种方法。这针对页面内任何位置的所有标题元素（根据要求）。

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

这个功能相同，但将特异性保持为 0。

:where(h1, h2, h3, h4, h5, h6) {}

使用 PostCSS

您还可以使用 PostCSS 和 自定义选择器插件

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

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

输出：

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

Plain CSS

With plain css you have two ways. This targets all the heading elements wherever they are inside the page (as asked).

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

This one does the same but keeps the specificity to 0.

:where(h1, h2, h3, h4, h5, h6) {}

With PostCSS

You can also use PostCSS and the custom selectors plugin

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

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

Output:

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}
回复 原文
风为裳 2024-12-13 10:25:30

2022 年 7 月更新

未来已经到来，:is 选择器就是您正在寻找的内容，如在此答案中所述 由 @silverwind 在 2020 年给出（现在是选定的答案）。

原始答案

要使用普通 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 标准不断发展而提供更多控制。

July 2022 update

The future came and the :is selector is what you're looking for as described in this answer given in 2020 by @silverwind (now the selected answer).

Original answer

To tackle this with vanilla CSS look for patterns in the ancestors of the h1..h6 elements:

<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..h6 elements may be targeted by combining the :first-child and :not pseudo-classes from CSS3, available in all modern browsers, like so:

.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.

回复 原文
烦人精 2024-12-13 10:25:30

SCSS+Compass 使这一切变得轻而易举，因为我们正在讨论预处理器。

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

您可以在此处了解所有指南针辅助选择器：

SCSS+Compass makes this a snap, since we're talking about pre-processors.

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

You can learn about all the Compass helper selectors here:

回复 原文
一百个冬季 2024-12-13 10:25:30

Stylus 的 选择器插值

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

Stylus's selector interpolation

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;
回复 原文
心清如水 2024-12-13 10:25:30

尝试
:is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6)

Try
:is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6)

回复 原文
梦开始←不甜 2024-12-13 10:25:30

如果您想使用单个选择器来定位文档中的所有标题，则可以对文档中的所有标题进行 .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 可能是有益的，只需注意 css 中的优先级，因为可能会出现冲突

You could .class all the headings in Your document if You would like to target them with a single selector, as follows,

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

and in the 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.

upside, more global control versus "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

回复 原文
白龙吟 2024-12-13 10:25:30

使用scss，您可以循环通过6并附加到一个空变量$headings使用逗号分隔符

$headings: ();

@for $index from 1 through 6 {
  $headings: list.append($headings, h#{$index}, $separator: comma);
}

#{$headings} {
  --default: var(--dark);
  color: var(--default);
}

谢谢@史蒂夫

Using scss you can loop through 6 and append to an empty variable $headings using a comma separator

$headings: ();

@for $index from 1 through 6 {
  $headings: list.append($headings, h#{$index}, $separator: comma);
}

#{$headings} {
  --default: var(--dark);
  color: var(--default);
}

Thanks @steve

回复 原文
~没有更多了~

关于作者

述情

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文