CSS如何仅选中第一个子元素？选中含1的table失败疑问

为什么.item table:nth-child(1)会选中所有table？ #

nth-child(1)的逻辑是：选中某个元素，这个元素必须是它父元素的第1个子元素，同时匹配前面的选择器。

看你的HTML结构：

<div class="item">
 <div><table>1</table></div>
  <div><table>2</table></div>
  <div><table>3</table></div>
</div>

每个<table>的父元素都是各自的<div>，而每个<div>里只有这一个<table>，所以每个<table>都是自己父元素的第1个子元素，自然会全部被选中。

正确的选择器写法 #

要选中包含“1”的table，需要先定位到.item下的第一个<div>子元素，再选中里面的table，用以下选择器：

/* 方法1：使用nth-child */
.item > div:nth-child(1) table

/* 方法2：使用first-child，效果相同 */
.item > div:first-child table

注：>是子元素选择器，确保只选中.item直接子级的<div>，避免嵌套层级干扰。

内容的提问来源于stack exchange，提问作者user22755177