【CSS】ID选择器

微信订阅号：Rabbit_svip

在选择器这个知识点中，ID选择器和类选择器（class）是最常见的。但因为常见，所以也常常会忽略很多非主线的知识点。比如【一本正经】如何用CSS选择符(数字开头) 杀死队友

目录

• ID选择器的完整性

• 常规知识点简单总结

---

ID选择器的完整性

ID 选择器具有唯一性，所以在使用时和类选择器有所不同。

class用法

<div class="animal rabbit"></div>

<style>
  .animal {
    border: 2px solid salmon;
  }
  
  .rabbit {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
  }
</style>

ID选择器并不能像上面的类选择器那样用。

不能使用 ID 词列表。不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
—— W3C

也就是说，下面的写法是无效的。

<div id="animal rabbit"></div>

<style>
/* 无效 */
#animal {
  border: 2px solid salmon;
}

/* 无效 */
#rabbit {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
</style>

其实W3C上也没很直白的说明。

ID 选择器要求必须使用完整的 ID 属性值，所以在用CSS的ID选择器时，空格也需要写上。

但由于空格在CSS选择器中有特殊含义（后代选择符），所以如果要表示空格，需要对空格进行转义。

<div id="animal rabbit"></div>

<style>
#animal\20 rabbit {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  border: 2px solid salmon;
}
</style>

空格转义后变成：\20

⚠️注意：“\20”后面上需要跟上一个空格的。

当然，也可以用下面这种全称的方式。

#animal\0020rabbit {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  border: 2px solid salmon;
}

这时，“\0020” 的后面就不用跟上“空格”了。

这工作中也许会遇到使用上面这种写法的同事，得防着。

如果这HTML中使用了上面的ID写法，用不想这CSS中使用转义的写法，这时就可以使用“属性选择器”的方式去选择元素。

[id~=”animal”] {…}

[id~=”rabbit”] {…}

---

常规知识点简单总结

ID选择器具有唯一性，在一个HTML文档中不会同时出现id相同的属性值。

ID可以用于在文档中标识元素，但通常不用于添加样式。

Web设计圈中有一个趋势，尽量不在CSS中使用ID选择符。

在《CSS重构》这本书里面建议一般情况下class用来给CSS提供选择入口，id则为js提供选择入口。

尽量不要用js直接修改元素样式，而是通过js修改元素的class从而修改样式。这样能很好的划分样式与逻辑。