如何用CSS选择器选中块内首个和末个指定class元素？

当然可以实现！咱们先针对你给出的HTML结构，用CSS精准定位目标元素，再聊聊你补充的动态表格场景该怎么处理。

首先看你的HTML结构：

<div id="list"> 
  <div> 
    <p class="line">This is the first line. I want to style this.</p> 
    <p class="line">Do not want to style this line</p> 
    <p class="line">Do not want to style this line</p> 
    <p class="line">Do not want to style this line</p> 
  </div> 
  <div> 
    <p class="line">Do not want to style this line</p> 
    <p class="line">Do not want to style this line</p> 
    <p class="line">Do not want to style this line</p> 
    <p class="line">This is the last line. I want to style this too.</p> 
  </div> 
</div> 
<div> 
  <p class="line">Do not want to style this line</p> 
  <p class="line">Do not want to style this line</p> 
  <p class="line">Do not want to style this line</p> 
</div>

针对原HTML结构的CSS解决方案 #

你要的是#list范围内的第一个和最后一个.line元素，不管它们在哪个子容器里，咱们可以用组合选择器来定位：

/* 选中#list下第一个子div里的首个.line */
#list > div:first-child .line:first-of-type {
  color: #e63946;
  font-weight: bold;
}

/* 选中#list下最后一个子div里的末个.line */
#list > div:last-child .line:last-of-type {
  color: #1d3557;
  font-weight: bold;
}

• #list > div:first-child 精准定位#list的第一个直接子div
• .line:first-of-type 选中该div内的第一个.line元素
• 同理，#list > div:last-child .line:last-of-type 找到#list最后一个子div里的最后一个.line

针对动态表格场景的JavaScript解决方案 #

正如你补充的，要是遇到行位置可变、随用户交互动态变化的表格，CSS就没法实时响应了，这时候得靠JavaScript来处理：

步骤1：编写样式类 #

先提前定义好要给首尾目标行的样式：

/* 首个目标行的列样式 */
.first-target-row td {
  background-color: #f8edeb;
  border-left: 3px solid #e63946;
}

/* 末个目标行的列样式 */
.last-target-row td {
  background-color: #f1faee;
  border-left: 3px solid #457b9d;
}

步骤2：编写JavaScript逻辑 #

用来动态定位并设置样式：

// 定义函数：更新目标行的样式
function updateTargetRowStyles() {
  // 先移除之前的样式类，避免残留
  document.querySelectorAll('.first-target-row, .last-target-row').forEach(row => {
    row.classList.remove('first-target-row', 'last-target-row');
  });

  // 获取表格内所有带有特定class的行（替换成你的实际class）
  const targetRows = document.querySelectorAll('table .your-specific-class');

  // 如果有匹配的行，给首尾行加样式类
  if (targetRows.length > 0) {
    targetRows[0].classList.add('first-target-row');
    targetRows[targetRows.length - 1].classList.add('last-target-row');
  }
}

// 页面加载完成后执行一次
document.addEventListener('DOMContentLoaded', updateTargetRowStyles);

// 如果你有用户交互（比如排序、筛选），在交互完成后调用这个函数
// 示例：假设点击排序按钮后更新样式
document.getElementById('sort-button').addEventListener('click', () => {
  // 这里放你的排序逻辑
  // ...
  // 排序完成后更新样式
  updateTargetRowStyles();
});

这个逻辑会在页面加载和用户交互后，重新定位所有目标行，给首尾行添加样式类，确保样式始终正确。

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