选择表中的第 n 列

Question

我想改变下面table中第三个td的width

#mytable table > tr > td:nth-child(3) {
  width: 600px !important;
}

<table id="mytable">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

你能帮帮我吗

Answer 1

两个错误：

1. 您的选择器：#mytable 已经是 table 并且没有 table 子级，
   所以只使用#mytable
2. table > tr 中的> 将不起作用，因为浏览器默认添加了tbody，
   因此tr 是tbody 的直系子级

#mytable{
  width:100%;
}
#mytable td:nth-child(3) {
  width: 600px; background:#eee;
}

<table id="mytable">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 2

#mytable table 表示 CSS 正在尝试查找 ID 为 mytable 的元素，并在该元素中查找 <table>。你也不需要那么具体；以下将实现您的目标：

#mytable tr td:nth-child(3) { width: 600px; }

Answer 3

• 当您的table 已经有ID #mytable 时，您选择table 作为#mytable 的子代

所以只选择#mytable

• 您正在使用 table > tr ，但正如 @Roko 提到的浏览器添加 tbody 以更正代码以便从中创建 DOM 层次结构。

因此，您甚至不需要使用tr 来选择td，因为您有table 作为父级来选择它。

注意

你也可以使用nth-of-type

#mytable {
  width: 100%;
}
#mytable td:nth-of-type(3) {
  width: 600px;
  background:red
}

<table id="mytable">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Answer 4

这应该视觉上对你来说更清楚

看到这个Fiddle。