CSS合併多個選擇器

有沒有辦法，如何在CSS中選擇器分組？準確地說，讓我們有一些像這樣的內容。CSS合併多個選擇器

<table id="my-table"> 
    <thead> 
     <tr> 
      <th><div class="my-div1"></div></th> 
      <th><div class="my-div2"></div></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><div class="my-div1"></div></td> 
      <td><div class="my-div2"></div></td> 
     </tr> 
    </tbody> 
</table>

而且我想這些樣式

#my-table tr > th .my-div1, 
#my-table tr > td .my-div1 { 
    some styles 
}

合併到這樣的事情

#my-table tr > (th, td) .my-div1 { 
    some styles 
}

CSS是否支持這樣的事？

來源

2015-04-03 Andree

眼前的問題是http://stackoverflow.com/questions/800779/why-cant-you-group-descendants-in-a的副本-css-selector，但在你的具體情況下，我不明白你爲什麼不能使用'＃my-table .my-div1'。 – BoltClock 2015-04-03 11:56:39

我不能跳過TH和TD，因爲之前定義的樣式（由其他開發人員在早期開發中定義並重構樣式將會困難且有風險）而僅使用類。我需要我的樣式具有比其他樣式更高的優先級（因爲後面的JavaScript操作，不能使用！重要），所以我需要包含TH和TD元素。 – Andree 2015-04-07 08:45:52

啊，夠公平的。 – BoltClock 2015-04-07 08:46:23

默認情況下，CSS不支持它。然而，我確信有CSS預處理器可以幫助你做到這一點。

只需跳過指定th或td並向右跳到該類。

<table id="my-table"> 
<thead> 
    <tr> 
     <th><div class="my-div1">A</div></th> 
     <th><div class="my-div2">B</div></th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td><div class="my-div1">C</div></td> 
     <td><div class="my-div2">D</div></td> 
    </tr> 
</tbody>

#my-table tr .my-div1 { 
    color: red; 
}

http://jsfiddle.net/gdsbLhb2/

來源

2015-04-03 11:51:13

CSS合併多個選擇器

回答

相關問題