使用 CSS 如何只更改表的第2列

仅使用 css，如何才能覆盖表的第2列的 css。

我可以使用以下方法查看所有栏目:

.countTable table table td

我不能得到这个网页上的 html 来修改它，因为它不是我的网站。

谢谢。

211935 次浏览
小开
最佳答案

您可以像下面这样使用 :nth-child伪类:

.countTable table table td:nth-child(2)

但是请注意，这在旧的浏览器(或 IE)中不起作用，在这种情况下，您需要给单元格一个类或使用 javascript。

小开

您可以为第二列中的每个单元格指定一个类。

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>
小开

试试这个:

.countTable table tr td:first-child + td

您还可以重复以便设计其他列的样式:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */
小开

若要仅更改表的第二列，请使用以下内容:

一般情况:

table td + td{  /* this will go to the 2nd column of a table directly */


background:red


}

你的情况:

.countTable table table td + td{


background: red


}

注意: 这适用于所有的浏览器(现代的和旧的) ，这就是为什么我添加了我对一个老问题的回答

小开

在这个网站 http://quirksmode.org/css/css2/columns.html我找到了简单的方法

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

提交答案