CSS改变表格某一列效果的方法

CSS对表格的行操作时只需对相应行标签<tr>加入class属性或id属性就行，反观列就不能使用这样快捷的方法，如果有对某个同列的单元格都加入class属性或id属性会让程序显得繁琐。

CSS有一个选择器：:nth-child(n)

这个选择器的作用是选择器选择属于其父元素的第 N 个子元素，不论元素的类型。例如：p:nth-child(2)就是选中了第二段文字。

<div>
	<p>第一段文字</p>
	<p>第二段文字</p>
</div>

这个选择器可以用来选择表格的某列。

例如这里有一个表格：

这是HTML代码：

<caption>Product List</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>xxx</th>
                <td>男</td>
                <td>1561434</td>
                <td>04班</td>
            </tr>
            <tr>
                <th>yyy</th>
                <td>女</td>
                <td>1864317</td>
                <td>14班</td>
            </tr>
        </tbody>

可以看到第一行标题行以及每行第一列第一个单元格都使用了<th>标签。这样才能更好发现:nth-child(n)的使用方法。

我们在CSS中选择第三列学号的底色加上绿色：

tr td:nth-child(3)
{
    background-color: rgb(114, 224, 129);
}

效果：

可见:nth-child(n)选中第几列n值就为几，不管该行是否都是<td>标签的单元格。

与其类似还有一个选择器：:nth-of-type(n)

这个选择器的作用是选择器选择属于其父元素的第 N 个同类型子元素，比如上面那个例子只会计入<td>的个数，所以相同效果就要：

tr td:nth-child(2)
{
    background-color: rgb(114, 224, 129);
}

关于这两个选择器还有两个相关的选择器，从最后一个子元素开始计数：

计所有子元素：:nth-last-child(n)
计所有相同元素：:nth-last-of-type(n)

可以根据实际情况选择选择器，列数过多又要使用靠后的就从后数。

这个选择器并不是只能在表格中使用，这只是在表格中的用法。希望有所帮助。