結合CSS後裔和類選擇器

是否有一種方便的方式來組合後代選擇器，以避免混亂的空間太多？結合CSS後裔和類選擇器

例如，我有兩個規則：

.details-recommendations-table th:nth-child(1) { /*rule*/ } 
.details-recommendations-table td:nth-child(1) { /*rule*/ }

的規則是一樣的，並描述了一類內的一些td和th元素，這將是很方便的將它們組合成一個。目前，我有

.details-recommendations-table th:nth-child(1), .details-recommendations-table td:nth-child(1) { /*rule*/ }

但這只是通過重複父類的名稱混亂的空間。是否有一個整潔的方式將這些規則結合起來，沿着線的東西：

.details-recommendations-table th:nth-child(1), td:nth-child(1) { /*rule*/ }

爲td:nth-child(1)部分傳播到其他表，也就是說，它並不適用中唯一以td元素上面不起作用.details-recommendations-table類，如預期的那樣。

來源

2013-12-13 wojrze

假設你td和th元素有效地放置在tr元素中，你可以簡單地將您的選擇器濃縮到：

.details-recommendations-table tr :nth-child(1) { /*rule*/ }

但是，如果您是w安亭拉第一種類型的（不管它們是第n個孩子），你可以使用：

.details-recommendations-table tr :nth-of-type(1) { /*rule*/ }

JSFiddle demo。

在這兩種情況下，這都假設您的td和th元素沒有子女。如果他們這樣做有孩子，你應該引入child combinator（>）：

.details-recommendations-table tr > :nth-of-type(1) { /*rule*/ }

來源

2013-12-13 15:22:58

這適用於後代的具體情況，並且回答我的問題。是否有一種將不同規則結合在一起的通用方法？即兩個不同的元素，例如'.details-recommendations-table span，.details-recommendations-table div'成類似'.details-recommendations-table <>''其中'<< >>代表某種分組？寫'.details-recommendations-table span，div'會使規則適用於所有的div ......我在清理樣式表之後採用了一種簡潔的方式。不使用'less.js'來嵌套事物。 – wojrze

我測試過，現在修好了，根據BoltClock's a Unicorn留下評論：

.details-recommendations-table :not(tr):not(tbody):nth-child(1) { /* rule */ }

演示：http://jsfiddle.net/Ym9Va/

來源

2013-12-13 15:20:23 melancia

這將匹配'tbody'如果有一個（通常有）。 – BoltClock

@ BoltClock'saUornorn好點。 – melancia

這將選擇任意的第一個孩子的TR正下方：

.details-recommendations-table tr>*:nth-child(1) { /*rule*/ }

來源

2013-12-13 15:25:14 jazZRo

結合CSS後裔和類選擇器

回答

相關問題