样式表的第一列不同，如果没有<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>

回答

相关问题