css - css：如果有 2 个，则首先应用规则

Question

如果有 2 个或更多，是否可以在<th>第一个应用规则？<tr><tr><thead>

我做了：

table tr:first-child th:first-child 

但如果只有 1 <tr>ti 无论如何都适用。

Answer 1

您可以像这样使用:not()和:only-child选择器的组合：

tr:first-child:not(:only-child) th:first-child {
    color:red;
}

代码是相对不言自明的，如果它不是独生子女，它只会影响第一个孩子。

演示

虽然它的支持相对较差，但如果您需要支持 IE8 或更低版本，您可能需要一个javascript polyfill来弥补它。

Answer 2

我认为不使用 css 是不可能的class。如果您正在动态创建 tr。我建议这样做：

if(condition for rows > 2) {
    <tr><th class="applyCSS"></th><th></th></tr>
    <tr><th></th><th></th></tr>
    ......
}
else {     //only one tr
   <tr><th></th><th></th></tr>
}

CSS：

applyCSS { .... }