选择表中的第n列

Question

我想更改以下width

中第三个td的{​​{1}}

table

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

你能帮帮我吗

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已经#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。