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

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。

这很可疑...我猜我在别的地方有问题，但我看不到它。

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

我在window上的IE9和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>

- Luc M

---

显然第二个例子有效是因为你添加了 h1。不确定你发现了什么可疑的地方。选择器 .myformat h1 只选择 .myformat 的子元素中的 h1... 这对你有所帮助吗？你期望 .myformat 做什么，为什么要使用它？ - Wesley Murch

@WesleyMurch 我本来以为规则会应用于所有hx子元素，但现在看来我完全误解了这个CSS行为。我想我需要多读一些资料。 - Luc M

我会再问一次，希望澄清你的问题：为什么你要使用.myformat h1而不是只用h1？ - Wesley Murch

Answer 1

尝试这样做：.myformat h1、.myformat h2、.myformat h3等等。

假设h1，h2和h3都在名为.myformat的div中。

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

- James

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>

- driangle

---

@LucM：如果带有类myformat的元素位于h1元素内部，则可以使用h1 .myformat来定位该内部元素。目前CSS中没有办法定位包含具有类myformat的元素的h1元素。 - Guffa

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

或者你可以选择使用单独的类名，这可能是更好的选择。

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

当你说.myformat p...但我卡在了<h1 class="myformat">text</h1>，你到底是什么意思？如果最终结果与您的预期不同，也许您正在经历margin collapsing？

- Oleg

---

我被卡住了，就像走进了死胡同。我不知道如何解决我的问题。我需要提高我的英语水平 :-) - Luc M