如何將一個規則應用於多個選擇器

所以，我說

.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

如何將一個規則應用於多個選擇器

回答

相關問題