爲什麼你不能在CSS選擇器中分組後代？

如果你想爲一組後代分配相同的風格，爲什麼沒有一種簡單的方法來用CSS做到這一點？爲什麼你不能在CSS選擇器中分組後代？

假設你有一個HTML表格如下：

<table id='myTable'> 
    <tr> 
    <th></th> 
    <th></th> 
    <th></th> 
    </tr> 
    . 
    . 
    . 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</table>

爲什麼你要的風格所有列標題和細胞與下面的選擇？

#myTable th, #myTable td {}

爲什麼沒有類似如下的語法？

#myTable (th,td) {}

來源

2009-04-29 eft

如果你想要的是語法，你可以擴展你的編輯器將自動擴大到符合標準的形式。 – 2009-04-29 07:07:25

短與W3C服用它，你可以使用jQuery一個類似的這種事情

$('#myTable').find('tr, td');

當然，JS並不總是啓用，它不會是一個好主意依靠這個。你只需要列出所有的選擇器！

來源

2009-04-29 03:48:50 alex

@alex - tx，我想知道什麼是歷史/理由是排除了這種類型的事情在CSS – eft 2009-04-29 03:50:24

可能只是W3C的做事有點滑稽......他們做了一點。 – alex 2009-04-29 03:52:30

您可以使用供應商特定的-moz-any()和-webkit-any()對選擇器進行分組。

請參閱MDN reference關於此，W3C recommendation關於:matches()僞屬性。

乾杯！

來源

2011-09-18 17:30:36 kunambi

爲什麼沒有類似於以下的語法？
#myTable (th,td) {} 

很簡單，因爲沒有人費心去提出一個有用的語法......直到最近，作爲（相對於一次發佈這個反正）在2008年，作爲一個:any() pseudo-class。這是在更深入的討論a little later。

第一個實現從Mozilla的浮出水面，雖然遲至2010年，在:-moz-any()幌子：

#myTable :-moz-any(th, td) {}

次年，it would be suggested that WebKit follow suit，與:-webkit-any()：

#myTable :-webkit-any(th, td) {}

但如果你是嘗試使用兩個前綴在一起，然後due to selector parsing rules你將不得不複製規則集，使您的代碼甚至更長，戰勝僞類的預期目的：

#myTable :-moz-any(th, td) {} 
#myTable :-webkit-any(th, td) {}

使用前綴選擇在面向公衆的代碼幾乎毫無意義這讓。除了特定於供應商的代碼外，我無法看到它們的任何合法用途，這意味着您可能不會在同一個樣式表中使用它們。

使用的新選擇4級工作草案有一個:matches() pseudo-class的建議，這是在原有基礎上:any()提議，但可能會看到某些增強的草案修訂：

#myTable :matches(th, td) {}

當然，因爲它是一個新的草案，不要期待瀏覽器支持，直到很久以後。

在造型既th和td元素的非常具體的情況下，你可以使用*而不是假設，沒有任何tr元素在該表中都不會包含除電池元件別的孩子，比如script或template：

#myTable tr > * {}

但是，如果你是一個表現癮君子並且厭惡*選擇器，那麼你必須堅持這麼做。

來源

2012-08-02 21:31:20 BoltClock

你可能要考慮SASS - http://sass-lang.com

它可以讓你以更合理的方式（類似於你的建議）寫CSS，但仍TI編譯到普通的舊的CSS。

例如：

#myTable{ 
    background: #CCC; 

    tr{ 
     border: 1px solid #EEE; 
    } 

    td{ 
     background: blue; 
    } 
}

來源

2012-08-02 21:47:48

爲什麼你不能在CSS選擇器中分組後代？

回答

相關問題