html - 这个 css 选择器有缩写形式吗

标签 html css css-selectors

我以前多次偶然发现这个问题,我一直在想是否可以用一种更简单、冗余更少的方式来编写它。

假设我们有这个 HTML:

<div class="wrapperClass">
    <div class="someClass">
        <h1>This is a title</h1>
    </div>
</div>

如果我想设置 <h1> 的样式我会这样进行的元素:

.wrapperClass .someClass h1 { 
    color: red;
}

我们假设用户也有可能使用 <h2>, <h3>, <h4>, <h5> or even a <h6>我们也需要涵盖这些案例。

我的 CSS 语句现在看起来像这样:

.wrapperClass .someClass h1, .wrapperclass .someClass h2, .wrapperClass .someClass h3 ...

这个语句真的很长;这就是为什么我想知道是否有这类案例的简短形式

最佳答案

(目前)没有任何标题选择器,但有一定限制的替代方法是:

.wrapperClass .someClass > *

它将匹配 任何 元素,该元素是 .someClass 的直接子元素。

关于html - 这个 css 选择器有缩写形式吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53613283/

相关文章:

javascript - html5 图像未加载到 Canvas 中

html - 在 React Bootstrap 中居中对齐 NavItem

javascript - 清除 flexbox 列

javascript - 悬停时如何增加多行文本的下划线宽度

jquery - 选择 ids 中具有相似模式的 div

html - 使用 CSS 选择器选择标签

css - 将音频播放器的宽度设置为屏幕宽度

javascript - 如何使用javascript删除子div

CSS 居中 : no top & left of the block seen on small window

堆叠列表中的 CSS 选择器