html - 在 <hX> 中定位 <small>

Question

我有一种有趣的元素需要在 CSS 中定位:它是 <small>在 <h[1-6]> 里面在 <div> 中上课 alert-message和 block-message .

基本上是这样的:

<div class="alert-message block-message">
    <h3>
        Hello World
        <small>And Hello Universe, too!</small>
    </h3>
</div>

我试过:

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small

和

div.alert-message.block-message h1 small, h2 small, h3 small, h4 small, h5 small, h6 small

但显然两者都不起作用。我只需要更改这些特定的字体颜色 <small> block 。我上述“查找”元素的方法有什么问题？

Answer 1

要专门针对这些，您的选择器必须是这样的:

div.alert-message.block-message h1 small,
div.alert-message.block-message h2 small,
div.alert-message.block-message h3 small,
div.alert-message.block-message h4 small,
div.alert-message.block-message h5 small,
div.alert-message.block-message h6 small {

}

我一直希望 h1-h6 有一个通用选择器，但不幸的是我们需要单独定位它们。

What's wrong with my approaches above in "finding" the elements?

记住逗号 , 分隔选择器，所以:

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small {}

等同于:

div.alert-message.block-message h1 {/* styles */}
h2 {/* styles */}
h3 {/* styles */}
h4 {/* styles */}
h5 {/* styles */}
h6 small {/* styles */}

I wonder if there's a LESS shortcut?

据我所知，标题没有快捷方式，但看起来您可以像这样使用嵌套选择器:

div.alert-message.block-message {
    h1, h2, h3, h4, h5, h6 {
        small {/* your CSS */}
    }
}