在 <hX> 中定位 答案

【问题标题】：Targeting a within a <hX>在 <hX> 中定位 
【发布时间】：2011-10-31 15:20:47
【问题描述】：

我有一个有趣的项目需要在 CSS 中定位：它是 <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

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

【问题讨论】：

标签： html css css-selectors

【解决方案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 有一个通用选择器，但不幸的是我们需要分别定位它们。

我上面“寻找”元素的方法有什么问题？

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

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 */}

不知道有没有LESS 快捷方式？

我知道没有标题的快捷方式，但看起来你可以使用这样的嵌套选择器：

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

【讨论】：

它必须如此冗长真是令人遗憾，但感谢您的回答！我想知道是否有一个更少的捷径......
好吧，你总是可以在标题中添加一个类，然后简单地使用：.message-heading small {}
没错，但那所以的黑客少得多:)

【解决方案2】：

逗号分隔整个选择器，而不是您所期望的选择器的一部分。

div.alert-message h1,h2 表示选择div.alert-message h1 并选择h2（全部）

你需要写

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

【讨论】：

【解决方案3】：

逐一针对描述中的每个声明。

【讨论】：