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>块的字体颜色。我在“找到”这些元素的方法上有什么问题？

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有一个通用选择器，但不幸的是我们需要单独定位它们。

上述“找到”元素的方法有什么问题？

请记住，逗号,分隔选择器，因此：

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

Answer 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

Answer 3

逐一描述说明中的每个声明。

在<hx> </hx> </small>中定位<small>

3 个答案: