什么是元素选择器
我们在开发过程中，一个页面可能有很多的元素，当我们想选择特定的元素并对其修改样式，我们就需要用到元素选择器了。
基本选择器
通用选择器（Universal selector）
选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
语法： * {}
/* 通用选择器 */
/* 匹配所有元素 */
* {
margin: 0;
padding: 0;
}
元素选择器（Type selector）
按照给定的节点名称，选择所有匹配的元素。
语法： name {}
/* 元素选择器 */
/* 匹配所有div元素 */
div {
width: 100px;
height: 100px;
}
类选择器（Class selector）
按照给定的 class 属性的值，选择所有匹配的元素。这也是开发中最常用的元素！
语法：.name
/* 类选择器 */
/* 匹配所有class里面是eg的元素 */
.eg {
width: 200px;
height: 200px;
}
/* 当直接选择制定元素的类时 */
div.eg {
width: 200px;
height: 200px;
}
ID 选择器（ID selector）
按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
语法：#name
/* ID 选择器 */
/* 匹配所有id里面是eg-name的元素 */
#eg-name {
width: 300px;
height: 300px;
background-color: blue;
}
属性选择器（Attribute selector）
按照给定的属性，选择所有匹配的元素。在开发中并不常用。
语法：[attr] [attr=value]
/* 属性选择器 */
/* 匹配所有属性为title的元素 */
[title] {
width: 400px;
height: 400px;
background-color: green;
}
/* 匹配所有属性为title且值为my-h2的元素 */
[title=my-h2] {
width: 500px;
height: 500px;
background-color: gray;
}
扩展：
[attr]
表示带有以 attr 命名的属性的元素。[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（”-“为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。[attr^=value]
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。[attr$=value]
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。[attr*=value]
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。