3

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

所以，我补充说

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

4

3 回答 3

6

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

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

你可以在这里查看：http: //jsfiddle.net/fYgdA/5/

于 2012-07-31T00:04:38.857 回答
3

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

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

如果myformat是 onh1那么你会想要使用 selector h1.myformat。因此，如果您的 html 如下所示，该选择器将起作用：

<h1 class='myformat'>Header One</h1>
于 2012-07-31T00:02:06.003 回答
2

.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>，你到底是什么意思？如果最终结果与您的预期不同，也许您正在经历利润崩溃？

于 2012-07-31T01:49:12.387 回答