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

所以，我说

.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上具有相同的行为。也复制在Firefox12在Fedora15的

编辑

我希望能够像做

<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”将只在头应用。

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

来源

2012-07-30 Luc M

很明显，第二个例子的工作原理是因为你添加了'h1'。不知道你发现什么可疑。选择器'.myformat h1'只选择一个'h1'，它是'.myformat'的一个孩子......这是否为你清除任何东西？你期待'.myformat'做什么，你为什么要使用它？ – 2012-07-30 23:58:26

@WesleyMurch我期待规则适用于所有hx孩子或不适用。我想我完全误解了这种CSS行为。我有一些阅读，我猜。 – 2012-07-31 00:03:00

我会再次问你希望澄清你的问题：为什么你使用'.myformat h1'而不是'h1'？ – 2012-07-31 00:07:16

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

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

如果myformat是在h1那么你将要使用的选择h1.myformat。

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

来源

2012-07-31 00:02:06 ggreiner

'myformat'在'h1'选择符内，而不在'div'中。 – 2012-07-31 00:05:02

@LucM：如果具有'myformat'类的元素位于'h1'元素内，那么您将使用'h1 .myformat'来定位该内部元素。没有办法（在当前的CSS中）来定位包含类“myformat”的元素的'h1'。 – Guffa 2012-07-31 00:19:57

尝试像这样.myformat H1，H2 .myformat，.myformat H3，等等等等

这是假设H1的H2的H3的是：所以，如果你的HTML是这样的选择将工作都在一个名为.myformat的div中。

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

来源

2012-07-31 00:04:38 James

这将是适当的有一个规则.myformat{margin-bottom:1em;}如果你的标记类似于下面的示例。这将因为选择器的特殊性而起作用，并将应用于任何具有类别的元素。

<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？

来源

2012-07-31 01:49:12

我在感受到我进入死胡同时受阻。我不知道如何解决我的问题。我需要提高我的英语水平:-) – 2012-07-31 01:55:28

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

回答

相关问题