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和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，.myformat h3等等。

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

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

Answer 2

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

<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> 上屏蔽时，您究竟是什么意思？如果最终结果与您预期的结果不同，您可能会遇到margin collapsing吗？

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

3 个答案: