樣式表的第一列不同，如果沒有<thead>

這是我想要的風格標記：

<h2>Table with no header</h2> 
    <table> 
    <tbody> 
     <tr> 
     <td>First column - bold</td> 
     <td>Second column</td> 
     </tr> 
     <tr> 
     <td>First column - bold</td> 
     <td>Second column</td> 
     </tr> 
    </tbody> 
    </table> 

    <h2>Table with a header</h2> 
    <table> 
    <thead> 
     <tr> 
     <th>Header</th> 
     <th>Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>First column - not bold</td> 
     <td>Second column</td> 
     </tr> 
     <tr> 
     <td>First column - not bold</td> 
     <td>Second column</td> 
     </tr> 
    </tbody> 
    </table>

關於如何達到預期結果的任何想法？

來源

2016-10-31 rouan

'！important'似乎沒有必要（？）：https：//jsfiddle.net/91e9ukf9/ –

裏克是正確的。 'thead + tbody td：first-child'比'td：first-child'更具體*，因此它將在不使用'！important'的情況下開創先例。 – Santi

Doh！我剛剛刪除了'！important'，它看起來都很完美。謝謝@RickHitchcock和@Santi。不知道我在那裏做了什麼......我想我已經有了我的答案。如果對任何人都有用，我會重寫我的問題並添加一個答案。 – rouan

做這樣的，在您使用的直接子選擇>，first-child和:not()

table > *:first-child:not(thead) td:first-child { 
    font-weight: bold; 
}

樣品

table > *:first-child:not(thead) td:first-child { 
 
    font-weight: bold; 
 
}

<h2>Table with no header</h2> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>First column - bold</td> 
 
     <td>Second column</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First column - bold</td> 
 
     <td>Second column</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<h2>Table with a header</h2> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Header</th> 
 
     <th>Header</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>First column - not bold</td> 
 
     <td>Second column</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First column - not bold</td> 
 
     <td>Second column</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-10-31 21:25:19 LGSon

我已經成功使用以下CSS來獲得所需的造型：

td:first-child { 
    font-weight: bold; 
    } 
    thead + tbody td:first-child { 
    font-weight: lighter; 
    }

來源

2016-10-31 20:25:15 rouan

樣式表的第一列不同，如果沒有<thead>

回答

相關問題