HTML/CSS - 格式下級元素

我有一個非常基本的問題，但我不知道怎麼表達，所以我就嘗試：HTML/CSS - 格式下級元素

我有我的網站上，它看起來像這樣的表：

<table class="display" width="100%"> 

.display td tr th 
{ 
    vertical-align: middle; 
    padding: 5px 5px 5px 5px; 
}

我想不爲每個TD元素寫<td class="display">來格式化表格（TD，TR，TH）的下級元素。

我不想改變td，tr或th，因爲我在我的網站上使用了其他表格，這些表格不應該受到影響。

有人可以幫我嗎？

西瓦

來源

2014-03-02 user2871190

怎麼樣：

table.display > tr > td { 
    vertical-align: middle; 
    padding: 5px 5px 5px 5px; 
}

來源

2014-03-02 16:46:40 EasterBunnyBugSmasher

號的樣子。請參閱''元素？ –

正確。我沒有想到這一點。 – EasterBunnyBugSmasher

這是一個有點冗長，但...

.display>thead>tr>td, .display>thead>tr>th, 
    .display>tbody>tr>td, .display>tbody>tr>th, 
    .display>tfoot>tr>td, .display>tfoot>tr>th, 
    .display>tr>td, .display>tr>th { 
    /* apply styles here */ 
}

這將應用樣式只屬於右表單元格（與class="display"）。

一旦CSS4獲得廣泛應用，你將能夠做到：在任何頁面的DOM

.display>:matches(thead,tbody,tfoot)>tr>:matches(td,th) { 
    /* apply styles here */ 
}

來源

2014-03-02 16:47:46

爲什麼需要孩子combinator（'>'），當然'.display td，.display th'會足夠嗎？ –

@DavidThomas嵌套表。 –

指定嵌套表的位置，是否編輯了問題？（我並非試圖討厭，而且反對嵌套表格的未來發展可能是一個好主意，但如果寫成這個問題似乎並不意味着需求。） –

HTML/CSS - 格式下級元素

回答

相關問題