Spa*_*awk 138 css css-selectors css3
我想定位页面上的所有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;
}
(但显然这不起作用)
Dav*_*kle 106
不,在这种情况下,您想要的是逗号分隔列表.
Ste*_*eve 42
这不是基本的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开发更具动态性.
Ben*_*ing 32
如果你正在使用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;
}
sil*_*ind 16
新的:is()CSS 伪类可以在一个选择器中完成：
:is(h1, h2, h3, h4, h5, h6) {
color: red;
}
小智 14
上下文：在 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组合器一起使用，例如~or甚至 （空格）来创建CSS选择器的“矩阵”而不是很长的列表。
鸣谢：本页上所有引用选择器的答案:is()。
由于我们讨论的是预处理器,SCSS + Compass使这一点变得轻而易举.
#{headings(1,5)} {
//definitions
}
未来已经到来，:is选择器就是您正在寻找的东西，正如@silverwind 在 2020 年给出的答案（现在是选定的答案）中所描述的那样。
要使用 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>
如果您可以发现模式，您也许可以编写一个针对您想要的选择器。鉴于上面的示例，所有h1..h6元素都可以通过组合CSS3 中的:first-child和:not伪类来定位，这在所有现代浏览器中都可用，如下所示：
.row :first-child:not(header) { /* ... */ }
将来，随着 Web 标准随着时间的推移不断发展，高级伪类选择器（如:has()、 和后续同级组合器( ~)）将提供更多控制。
对于普通的 css，你有两种方法。这针对页面内任何位置的所有标题元素（根据要求）。
:is(h1, h2, h3, h4, h5, h6) {}
这个的作用相同，但将特异性保持为 0。
:where(h1, h2, h3, h4, h5, h6) {}
您还可以使用 PostCSS 和自定义选择器插件
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
:--headings {
margin-top: 0;
}
输出：
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
小智 5
所有 h 标签（h1、h2 等）的 jQuery 选择器是“:header”。例如，如果您想使用 jQuery 将所有 h 标签设为红色，请使用：
$(':header').css("color","red")