CSS定位 页码总是定位到第一页

Question

我每次选择一个数值监测变化。它都会跳到第
一页的地方。想用CSS选择器定位后面页码的
数值怎么做?
总的来说问题是：所以我左下角CSS填入什么
啊。也就是说比如想选第四页的tr:nth-
child(4)td：nth-child(12)。主要“第四页”怎么
添加上去?

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题是CSS定位问题，想要使用CSS选择器定位到指定页码的数值。根据你的描述，你想要选择第四页的tr:nth-child(4)td，但是总是跳到第一页。

解决方案是使用CSS的:nth-child伪类选择器，结合JavaScript的正则表达式来实现。

假设你的HTML结构是：

<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  ...
  <tr>
    <td>10</td>
  </tr>
</table>

你可以使用以下CSS代码：

table tr:nth-child(4) td {
  /* 选择第四页的tr:nth-child(4)td */
  background-color: yellow;
}

但是，这个方法有一个问题，如果你的页码总是从1开始，那么你需要使用JavaScript来计算页码的索引。

你可以使用以下JavaScript代码：

var table = document.querySelector('table');
var trs = table.querySelectorAll('tr');
var currentPage = 4; // 你想要选择的页码

trs.forEach(function(tr, index) {
  if (index + 1 === currentPage) {
    tr.querySelector('td').style.background = 'yellow';
  }
});

这段代码使用querySelectorAll方法选择所有的tr元素，然后使用forEach方法遍历每个tr元素。如果当前tr元素的索引加1等于你想要选择的页码， alors将其背景颜色设置为黄色。

你可以将这段JavaScript代码添加到你的HTML文件中，然后使用CSS选择器来选择你想要的页码。

代码示例

<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  ...
  <tr>
    <td>10</td>
  </tr>
</table>

<script>
  var table = document.querySelector('table');
  var trs = table.querySelectorAll('tr');
  var currentPage = 4; // 你想要选择的页码

  trs.forEach(function(tr, index) {
    if (index + 1 === currentPage) {
      tr.querySelector('td').style.background = 'yellow';
    }
  });
</script>

结论

使用CSS选择器和JavaScript的正则表达式，可以实现选择指定页码的数值。需要注意的是，JavaScript代码需要根据你的HTML结构进行修改。