如何获取两个指定div内的p子元素并修改其id或class属性

你可以根据自己的使用场景选择下面三种方案，都能实现精准控制两个div内p元素样式的需求：

方案1：纯CSS直接定位（零HTML修改，成本最低） #

不需要额外给p标签加任何id或新class，直接用CSS后代选择器搭配结构伪类就能精准选中每个p元素，示例代码如下：

/* 定位page1-div下的p元素，括号内的序号从1开始，按p在div内的出现顺序计数 */
#page1-div p:nth-of-type(1) { /* 对应内容为Mario的p标签 */
  /* 在这里写自定义样式即可，优先级高于原有class的样式 */
}
#page1-div p:nth-of-type(2) { /* 对应内容为Lopez的p标签 */
  /* 自定义样式 */
}
/* 其余p按序号顺延即可，计数时会自动忽略div内的img等非p元素，序号不会错乱 */

/* page2-div下的p标签定位逻辑完全一致 */
#page2-div p:nth-of-type(1) { /* 对应page2第一个内容为25的p标签 */
  /* 自定义样式 */
}
#page2-div p:nth-of-type(7) { /* 对应内容为9:30-14:30的p标签 */
  /* 自定义样式 */
}

方案2：JS批量自动生成唯一标识（适合需要后续JS操作元素的场景） #

如果觉得记nth-of-type的序号麻烦，或者后续需要通过JS获取对应元素，可以跑一段简单的脚本自动给所有目标p加唯一id，不需要手动逐个修改HTML标签：

// 获取两个目标容器
const pageContainers = [document.getElementById('page1-div'), document.getElementById('page2-div')];
pageContainers.forEach((container, pageNo) => {
  const pElements = container.querySelectorAll('p');
  pElements.forEach((p, pNo) => {
    // 生成格式为pageX-pY的唯一id，比如page1下第一个p的id就是page1-p1
    p.id = `page${pageNo + 1}-p${pNo + 1}`;
    // 如果想用class实现，把上面一行替换成下面的代码即可
    // p.classList.add(`page${pageNo + 1}-p${pNo + 1}`);
  })
})

脚本执行完成后，直接在CSS里用id选择器写对应样式即可：

#page1-p1 {
  color: #f00;
}
#page2-p3 {
  font-weight: bold;
}

方案3：手动添加语义化class（适合长期维护的项目） #

如果这些p标签对应固定的业务字段（比如姓名、学号、科目、时间等），直接手动给对应p加语义化class是可维护性最高的方案，哪怕后续调整p的排列顺序，样式也不会失效，示例：

<p class="ft10 user-firstname">Mario</p>
<p class="ft10 user-lastname">Lopez</p>
<p class="ft10 user-id">18987456O</p>
<p class="ft20 course-time">9:30-14:30</p>

写CSS时直接用语义化class选择器即可：

.user-firstname {
  font-size: 18px;
}
.course-time {
  color: #2c3e50;
}

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