如何有效地選擇多個CSS父代和後代組

我現在擁有的一切：

aside p, aside h1, aside h2, aside h3, aside h4, 
article p, article h1, article h2, article h3, article h4, 
section p, section h1, section h2, section h3, section h4 { 
width: 75%; 
padding: 15px 0; 
margin: 0 auto; 
text-align: center; 
}

來源

2013-02-18 Raphael Rafatpanah

可以添加你的html？ – 2013-02-18 23:18:12

最高效，簡潔，具體的選擇，簡直是：

.selector { 
    width: 75%; 
    padding: 15px 0; 
    margin: 0 auto; 
    text-align: center; 
}

它可能是opinable它會污染您的標記，但是在CSS性能方面純淨，這是它。

至於*選擇，其性能差，加上父母選擇將無法改善的情況下，爲illustrated here

風格系統通過與鍵選擇開始，然後移動到左邊匹配規則（在規則的選擇器中尋找任何祖先）。只要選擇器的子樹繼續檢出，風格系統繼續向左移動，直到它匹配規則或由於不匹配而放棄。

一個最後一句話，aside, article, section沒有在IE支持< 8所以任何造型不會被這些瀏覽器拾取（除非使用填充工具，但是這是一個只有JS方式）

來源

2013-02-19 00:10:34 Luca

輝煌。我不知道爲什麼我沒看到這個。 – 2013-02-19 00:20:28

我有H5BP的默認modernizr，會填充旁邊，文章，部分等嗎？ – 2013-02-19 00:23:05

我認爲這是必須的，因爲我的頁面在IE7和IE8中的風格相似。 – 2013-02-19 00:25:24

你可以刪除所有的標籤特異性。

p, h1, h2, h3, h4 { 
width: 75%; 
padding: 15px 0; 
margin: 0 auto; 
text-align: center; 
}

來源

2013-02-18 23:19:15

謝謝你的幫助！ – 2013-02-18 23:45:41

使用純CSS，您當前的方式可能是最有效的方法，除了在所有h標籤上設置類以外。

使用LESS，你可以做這樣的事情：

aside, article, section { 
    h1, h2, h3, h4 { ... } 
}

來源

2013-02-18 23:21:45 JSW189

如果只有（P，H1-H4）的父母，你可以這樣做：

aside > *, article > *, section > * { 
width: 75%; 
padding: 15px 0; 
margin: 0 auto; 
text-align: center; 
}

它只會影響直接的孩子。

來源

2013-02-18 23:21:50 starowere

有趣！同樣，我可以使用：對於所有後代，除*以外，對嗎？ – 2013-02-18 23:47:17

沒錯。但是你應該記住關於選擇器的優先級 - 如果p＃inAside有一些css屬性 - 之前將被忽略。 – starowere 2013-02-18 23:52:53

謝謝，我學到了一些東西！ – 2013-02-19 00:05:00

如何有效地選擇多個CSS父代和後代組

回答

相關問題