如何为单个类元素添加属性，且不影响其他同名类元素？

如果只想给某一个带有指定类名的元素添加属性，不影响其他同名类元素，有以下几种实用方法：

1. 用唯一ID定位 #

给目标元素加上唯一ID，直接通过ID选择器精准操作：

<!-- HTML -->
<div class="box" id="target-box">目标元素</div>
<div class="box">其他元素</div>

/* CSS设置样式属性 */
#target-box {
  background-color: #ff4444;
  padding: 10px;
}

// JS设置属性或样式
document.getElementById('target-box').style.color = '#fff';
document.getElementById('target-box').setAttribute('data-status', 'active');

2. 通过父容器限定范围 #

如果目标元素在特定父容器内，用父容器选择器+类选择器组合定位：

<!-- HTML -->
<div class="special-wrapper">
  <div class="box">目标元素</div>
</div>
<div class="box">其他元素</div>

/* CSS */
.special-wrapper .box {
  border: 2px solid #22dd22;
}

// JS
document.querySelector('.special-wrapper .box').style.fontSize = '18px';

3. 用伪类选择特定位置的元素 #

如果目标元素是同级别中的第N个，用:nth-child或:nth-of-type伪类定位：

<!-- HTML -->
<div class="list-item">第1个</div>
<div class="list-item">第2个（目标）</div>
<div class="list-item">第3个</div>

/* CSS */
.list-item:nth-child(2) {
  color: #0066cc;
}

4. JS直接选中单个目标元素 #

如果不需要额外标记，用querySelector选第一个匹配元素，或者通过索引获取指定元素：

// 选页面中第一个.box元素
const firstTarget = document.querySelector('.box');
firstTarget.style.borderRadius = '4px';

// 选第3个.box元素（索引从0开始）
const allBoxes = document.querySelectorAll('.box');
if (allBoxes.length >= 3) {
  allBoxes[2].setAttribute('title', '这是第三个元素');
}

内容的提问来源于stack exchange，提问作者Quốc Tuấn Từ