我无法理解选择器的工作原理？

Question

我不明白如何使用这两个伪类。我想用单元格3,3,3将黑色背景更改为行。

＆＃13;

＆＃13;

tbody tr:not(:empty):first-of-type td {
  background: black;
}

＆＃13;

<table>
  <tr>
  </tr>

  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>

  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>

  <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>

  <tr>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

为什么背景不适用？

Answer 1

单元格“3”位于倒数第二行中。要选择倒数第二个行，您应该使用:nth-last-child()，如下所示：

edit2：<nope tbody is created as an anonymous element by browsers so you can select tbody something without any tbody in a table>正如@Esko在对您的问题的评论中所述，您的HTML代码中没有tbody元素。然后，您应该从选择器中删除它。 tr只能在表格中找到，因此无需在选择器的左侧添加table（但您可以）。</nope>

注1：您的tr都不是空的：它们包含空格，因此非空。 <tr></tr>和<tr><!-- some comment --></tr>：都是空的 <tr> </tr>：非空

注意2：:first-of-type会在您的代码中选择第一个tr，这是内部没有td的{​​{1}}如果它有td孩子，它仍然是第一个类型）

tr:nth-last-child(2) td {
			background:black;
		}

<table>
<tr>
	
</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>2</td>
		<td>2</td>
		<td>2</td>
		<td>2</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>3</td>
		<td>3</td>
		<td>3</td>
		<td>3</td>
	</tr>
	<tr>
	</tr>
</table>