如何将一条规则应用于多个选择器

Question

我想为所有标题应用一种格式。

所以，我添加了

 .myformat h1, h2, h3, h4, h5, h6  {  margin-bottom : 1em; ... }

这样写，它不考虑第一个hx。这些规则不适用于h1。

当我像一样写的时候

 .myformat h1, h2, h3, h4, h5, h6, h1  {  margin-bottom : 1em; ... }

一切都很好。这些规则适用于h1、h2。。。和h6。

这很可疑。。。我想我在其他地方有问题，但我看不到。

将规则应用于多个选择器是否正确？

我在IE9和Windows上的Chrome20上也有同样的行为。也在Fedora15 上的Firefox12上复制

---

编辑

我想做一些类似的事情

<h1 class="myformat">This text will be red and 
                     or all hx where I apply "myformat"
</h1>
<p class="myformat">This text will be yellow only
                    when myformat is applied on a paragraph
</p>

我创建了.myformat h1, h2, h3, h4, h5, h6 { margin-bottom : 1em; ... }，相信这种"myformat"只会应用于标头。

我要创建.myformat p { margin-bottom : 3em; ... }
但我在<h1 class="myformat">text</h1> 上阻止了

Answer 1

这样试试。myformat h1、.myformat h2、.myform h3等。

这是假设h1的h2的h3都在一个名为.myformat.的div中

您可以在此处查看：http://jsfiddle.net/fYgdA/5/

Answer 2

您使用的语法是正确的。您遇到的问题可能与选择器.myformat h1有关。检查您的html代码，该选择器只会在类为myformat的元素中找到一个h1。例如：

<div class='myformat'>
   <h1>Header One</h1>
</div>

如果myformat在h1上，则需要使用选择器h1.myformat。因此，如果你的html像一样，选择器就会工作

<h1 class='myformat'>Header One</h1>

Answer 3

如果您的标记类似于下面的示例，那么使用一个规则.myformat{margin-bottom:1em;}是合适的。由于选择器的特殊性，这将适用于任何具有myformat类的元素。

<h1 class="myformat">Header</h1>
<h2 class="myformat">Subheader</h2>
...

假设您想用这个相同的myformat类分别设置页眉和段落的样式，那么您有两个选项。你可以有冗长的（资历过高的）选择器，比如

h1.myformat, h2.myformat, h3.myformat {/*some style*/}
p.myformat {/*some other style*/}

或者你可以选择单独的类名，这将是最好的imo

.myformat-title {/*some styles to apply to headers*/}
.myformat-content {/*some styles to apply to paragraphs*/}

当你说.myformat p...，但我阻止了<h1 class="myformat">text</h1>时，你到底是什么意思？如果最终结果与你的预期不同，也许你正在经历利润崩溃？