微信订阅号：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从而修改样式。这样能很好的划分样式与逻辑。
