CSS选择器应避免使用ID，求替代方案及唯一元素定位方法

这个问题问得好！CSS Lint不推荐用ID选择器的核心原因是ID的权重过高——它的优先级比类、属性选择器都高太多，一旦用ID写样式，后续想覆盖它会非常麻烦；而且ID是唯一的，没法复用，不符合CSS模块化的思路。下面给你几个实用的替代方案，针对你说的「数十个.my-class元素里要给其中一个加特殊样式」的场景也会具体举例：

1. 新增专属类名（最推荐） #

这是最直观、维护性最好的方案。给需要特殊样式的元素加一个独特的类，比如遵循BEM命名规范的my-class--special（双横线表示变体），这样既保留了原类的通用样式，又能精准定位目标元素：

<div class="my-class">普通元素</div>
<div class="my-class my-class--special">特殊元素</div>
<div class="my-class">普通元素</div>

.my-class {
  /* 通用样式 */
  padding: 10px;
  border: 1px solid #eee;
}

.my-class--special {
  /* 特殊样式，权重和原类一致，能轻松覆盖或新增 */
  background-color: #ffeb3b;
  border-color: #fbc02d;
}

2. 使用自定义属性选择器 #

如果不想额外加类名，可以给元素加一个自定义数据属性，比如data-unique="special-item"，然后用属性选择器定位：

<div class="my-class">普通元素</div>
<div class="my-class" data-unique="special-item">特殊元素</div>

.my-class[data-unique="special-item"] {
  background-color: #ffeb3b;
}

属性选择器的权重和类选择器相同，不会出现权重过高的问题，而且属性值可以灵活定义，适合需要动态标记的场景。

3. 利用上下文/结构关系选择器 #

如果目标元素在DOM结构中有固定的位置（比如是父容器里的第一个子元素，或者某个兄弟元素之后），可以用上下文选择器定位：

• 比如选中父容器.item-container下的第一个.my-class：

.item-container .my-class:first-child {
  background-color: #ffeb3b;
}

• 或者选中某个特定元素之后的.my-class：

.featured + .my-class {
  background-color: #ffeb3b;
}

这种方式不需要修改HTML，但依赖DOM结构，一旦结构变动样式就会失效，适合结构稳定的场景。

4. 使用伪类选择器 #

如果目标元素是同类型元素中的第N个，可以用:nth-of-type()、:first-of-type等伪类：

.my-class:nth-of-type(5) {
  /* 选中第5个.my-class元素 */
  background-color: #ffeb3b;
}

同样，这种方式依赖元素的位置顺序，适合列表类有固定顺序的场景。

额外提醒 #

需要注意的是，CSS里不推荐用ID，但JavaScript里完全可以用ID来获取元素——ID在JS中的定位效率很高，两者不冲突。CSS里避免用ID主要是为了避免权重陷阱和提升样式复用性。

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