点击元素添加clicked类后CSS选择器未生效，如何切换红色背景元素？

错误原因 #

你误解了:nth-child()选择器的工作逻辑：

• :nth-child(n)匹配的是父元素下第n个子节点，不管节点类型、class是什么，它基于父元素所有子节点（包括文本、空格节点）的位置排序。
• 第二个span.rounded在<p>里的位置是固定的，永远不会变成第1个子节点，所以span.rounded:not(.clicked):nth-child(1)永远匹配不到它。
• 甚至你最初的选择器能选中第一个span.rounded都是巧合——第一个span.rounded实际是<p>的第2或第3个子节点，根本不符合:nth-child(1)的条件，本质是你对:nth-child()的作用逻辑理解错误。

实现方法 #

方法一：纯CSS（需现代浏览器支持:has()选择器） #

通过:has()选择器感知已点击元素的存在，自动切换高亮目标：

/* 初始状态：第一个未点击的rounded元素变红 */
span.rounded:not(.clicked):first-of-type {
  background: red;
}

/* 当存在已点击元素时，选中第一个未点击的rounded元素变红 */
p:has(.clicked) span.rounded:not(.clicked):first-of-type {
  background: red;
}

/* 已点击的元素移除红色背景 */
span.rounded.clicked {
  background: transparent;
}

方法二：JS配合CSS（兼容性更佳） #

通过JavaScript控制点击事件，精准切换下一个高亮元素：

1. CSS样式：

/* 高亮样式 */
span.rounded.highlight {
  background: red;
}

2. JavaScript逻辑：

// 初始给第一个rounded元素添加高亮
document.querySelector('.rounded').classList.add('highlight');

// 为所有rounded元素绑定点击事件
document.querySelectorAll('.rounded').forEach(el => {
  el.addEventListener('click', function() {
    // 标记当前元素为已点击，移除高亮
    this.classList.add('clicked');
    this.classList.remove('highlight');
    // 查找下一个未被点击的rounded元素
    let nextEl = this.nextElementSibling;
    while (nextEl) {
      if (nextEl.classList.contains('rounded') && !nextEl.classList.contains('clicked')) {
        break;
      }
      nextEl = nextEl.nextElementSibling;
    }
    // 如果找到下一个目标，添加高亮
    if (nextEl) {
      nextEl.classList.add('highlight');
    }
  });
});

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