Question

我如何定位第n个类型的第5个td？或不使用类或ID的

的任何其他方式

<body>
<h1>aaaa</h1> 
<table>
<tr>
    <td ></td>
    <td ></td>
    <td></td>
</tr>
<tr>
    <td ></td>
    <td ></td>
    <td></td>
</tr>
<tr>
    <td ></td>
    <td ></td>
    <td></td>
</tr>
</table>
</body>

Answer 1

您可以使用选择器；

 <body>
<h1>aaaa</h1> 
<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
</tr>
<tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
</tr>
</table>
</body>

第5个元素就是这个，我假设您要在CSS中定位它？

body > table > tbody > tr:nth-child(2) > td:nth-child(2) {
    width: 10px; // For example
}

Answer 2

在CSS中，您无法在忽略标签的所有祖先元素的情况下选择其所有元素的“第n个”。您必须沿途选择祖先。

如果第五个td是第二行的第二列，则为：

tr:nth-child(2) > td:nth-child(2) {
  color: red;
}

Answer 3

<body>
<h1>aaaa</h1> 
<table>
<tr>
  <td data-index="1">first</td>
  <td data-index="2">second</td>
  <td data-index="3">third</td>
</tr>
<tr>
  <td data-index="4">fourth</td>
  <td data-index="5">fifth</td>
  <td data-index="6">sixth</td>
</tr>
<tr>
  <td data-index="7">seventh</td>
  <td data-index="8">eighth</td>
  <td data-index="9">ninth</td>
</tr>
</table>

<script type="text/javascript">
  console.log(document.querySelector('td[data-index="5"').innerHTML);
  //fifth
</script>
</body>

如何定位没有类或id的元素

3 个答案: