Question

我想将样式应用于仅由<td>组成的表格，以根据表格中的列数突出显示标题行/列。

诀窍是，我不希望它与正确设置<th>单元格的表格冲突。

浏览器：Chrome v53（MacOS上为64位）

我尝试过的内容： http://jsbin.com/tacevu/edit?html,css,output

我几乎就在那里，如果一个表有超过2列，我就无法突出显示第一行（即场景“表4”）。也许Chrome不支持!父选择器？

/* highlight first ROW if > 2 columns*/
tr:first-child! td:nth-last-child(4) { background-color:blue; }

<table>
  <caption>Table 4</caption>
  <tr>
    <td>aaa</td><td>bbb</td><td>aaa</td><td>bbb</td>
  </tr><tr>
    <td>aaa</td><td>bbb</td><td>aaa</td><td>bbb</td>
  </tr><tr>
    <td>aaa</td><td>bbb</td><td>aaa</td><td>bbb</td>
  </tr>
</table>

Answer 1

尝试这个n + 3孩子超过2个孩子

 tr:first-child td:nth-last-child(n+3) ~ td,
 tr:first-child td:nth-last-child(n+3):first-child{
    background-color: blue;

}

table,
tr,
td,
th {
  border: 1px solid grey;
}
/* highlight TH */

th {
  background-color: red;
}
/* highlight first COLUMN if 2 columns */

td:nth-last-child(2):first-child {
  background-color: lime;
}
/* highlight first ROW if > 2 columns*/

tr:first-child td:nth-last-child(n+3) ~ td,
tr:first-child td:nth-last-child(n+3):first-child {
  background-color: blue;
}

<table>
  <caption>Table 1</caption>
  <tr>
    <th>aaa</th>
    <td>bbb</td>
  </tr>
  <tr>
    <th>aaa</th>
    <td>bbb</td>
  </tr>
  <tr>
    <th>aaa</th>
    <td>bbb</td>
  </tr>
</table>

<br/>

<table>
  <caption>Table 2</caption>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
</table>

<br/>

<table>
  <caption>Table 3</caption>
  <tr>
    <th>aaa</th>
    <th>bbb</th>
    <th>aaa</th>
    <th>bbb</th>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
</table>

<br/>

<table>
  <caption>Table 4</caption>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
</table>

PC：http://lea.verou.me

Answer 2

据我所知，CSS中没有父选择器。由于!，该规则可能被忽略。这就是为什么它不起作用。

Answer 3

您是否尝试过使用兄弟选择器进行实验？我认为它不会达到您想要的效果，但它可能会让您大部分时间：

tr:first-child td:nth-child(2) ~ td,
tr:first-child th + td {  
  background: goldenrod
}

或者也许：

tr:first-child td:nth-last-child(4),
tr:first-child td:nth-last-child(4) ~ td { background-color:blue; }

CSS中没有父选择器。

CSS＆gt;如果宽度超过2列，则突出显示第一行

3 个答案:

}