开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
选择器作用
css主要是借助规则去给HTML页面的元素进行样式的规定。而一个元素一个元素去规定无疑是耗时、麻烦且没有必要的事情。而选择器的出现就是为了，让一组相同的样式同时应用于多个元素之上。
简单选择器
元素选择器
以标签名作为主体的选择器。
例如 h1 { color:black; }中的h1就是一个元素选择器。
可以将所有标签名为 选择器主体 的元素选中。
类选择器
定义
以.和元素的class属性值作为主体的选择器。
例如 .test { color:black; }中的.test就是一个元素选择器。
可以将所有class的属性值为选择器指定内容的元素选中。
例如：定义的例子中的选择器会将所有的class的属性值为test的元素选中。
语法
先设定html中要选中元素的class属性，之后在css文件中写class对应的样式。
选定指定类型的元素。
.元素的class属性值 {
一些样式规则;
}
选定 标签为指定标签且类型为指定类 的元素。
指定的元素标签.元素的class属性值 {
一些样式规则;
}
例如：a.test就是元素标签为a且class含有test的元素。
选定class中同时有指定的多个类的元素
语法
首先：一个元素的class是可以存在多个值的，每个值之间使用空格作为分隔符。
那么我们其实就可以选择同时具有多个类的元素。
语法就是多个类选择器挨着写，中间不要有任何符号。这样的选择器会选中一定包含所有的指定选择器的元素。【不能少任何一个指定的选择器，但元素的class可以多出来其他的选择器】
元素选择器.第一个类选择器.第二个类选择器 {
一些规则;
}
例如：
a.t1.t2 {}
<a class = "t1 t2 test">测试</a>
上述代码中的元素，虽然多出来一个test类，但是仍然会被选中。
应用场景
应用样式时，不关心元素的标签，且样式可能会应用在多个元素上。
id选择器
定义与语法
以#和元素的id属性值作为主体的选择器。整个文档中所有元素的id应该都是唯一的。
例如 #test { color:black; }中的#test就是一个元素选择器。
该类选择器可以将id的属性值为选择器指定内容的元素选中。当前前面和类选择器一样，是可以用元素选择器指定选中元素为特定标签的，但是他只会选中一个元素，所以一定要保证元素的id唯一。
例如：定义的例子中的选择器会将的id的属性值为test的元素选中。
应用场景
若文档中只会出现一次且只有一个元素需要被选中，但选择的元素的类型不确定，则应该使用id选择器。
id选择器与类选择器的区别
- 一个类选择器可以对应一个或多个元素，id选择器只能对应一个元素。类可以被挂在多个元素上，id在一个文档中只能出现1次，挂在一个元素上。
- 类选择器可以串在一起使用【
.t1.t2.t3】，而id选择器不行，因为元素的id属性值不可以是空格分隔数值的列表。 - id选择器的特指度高于类选择器。
分组选择器
应用场景
若是想让一个样式表，应用于多个不同的选择器选中的元素，那么可以使用分组选择器。
语法
css声明的选择器可以写为多个选择器，每个选择器之间使用逗号分隔。这样每一个被逗号分割的选择器选中的元素都会应用指定样式。
选择器1, 选择器2, 选择器3 {
各种css规则
}
通用选择器
作用
用于将所有元素都选择
语法
将*作为声明的选择器。
* {
一堆规则
}
*, h1 {
一堆规则
}
属性选择器
作用
在一些标记语言之中，id选择器和类选择器无法进行使用【因为可能都没有这两个属性】，所以css2引入属性选择器，可以根据属性的值来选择元素。
本文对于“支持”的约定
注意：此处的支持指的是：我在书写文档代码时，写某个标签时书写了某些属性，这些已经被书写的属性才算是支持。元素本身有某个属性，但是我写文档的时候没有写这个属性，在这里这个属性也是“不支持”的。
例如： a元素原本就有属性href，但是我在写文档时写道<a></a>。那么此时这个元素不支持href属性。
类别
- 简单属性选择器
- 精准属性选择器
- 部分匹配属性值选择器
- 起始值属性选择器
简单属性选择器
作用
该选择器不关注属性值，只关注元素是否支持该属性，选择支持该属性的元素时，可以使用该种选择器。
语法
元素选择器省去时，则相当于隐式地加上通用选择器。
- 选择支持指定属性且标签为指定标签的元素.
元素选择器或通用选择器[属性名] {
}
- 选择同时支持多个指定属性且标签为指定标签的元素。
元素选择器或通用选择器[属性名1][属性名2][属性名3] {
}
示例
*[alt][title] {
color: black;
}
<img title = "1" alt = "1" src = "1.png"></a>
<img alt = "2" src = "2.png"></a>
<img title = "3" src = "3.png"></a>
上述代码匹配所有同时支持alt和title属性的元素。所以只有第一个标签匹配了该选择器，剩余两个不匹配【因为没有全部书写对应的属性】。
精准属性选择器
作用
只选择属性为特定值的元素。
语法
和简单属性选择器的语法差不多，只是可以在括号内部使用=进行属性值的指定，表示只会选择属性值为指定的值的元素，若是不为指定值，那么是不会选择的。
元素选择器或通用选择器[属性名1 = "特定值1"][属性名2 = "特定值2"][属性名3 = "特定值3"] {
}
注意
若是元素的属性有多个值【值为一个列表】，那么对于单个值的精准属性选择器是无法匹配该元素的。所以必须令选择器的值与属性的值完全相同才能匹配。
示例
<a href = "1.html" title = "t1 t2"></a>
上述代码使用a[title = "t1"]或a[title = "t2"]或a[title = "t1"][title = "t2"]或[title = "t2 t1"]是无法进行匹配的。
只能通过[title = "t1 t2"]来进行匹配。
部分匹配属性值选择器
应用场景及作用
要是想根据属性值的一部分进行元素选择，比如选中但凡title属性含有t1的元素。我们可以用该种类型的属性选择器
匹配以特定属性值为开头的选择器
元素或通用选择器[属性名|="属性值"]，该选择器会选中：元素中支持指定属性，且该属性的值为指定属性值或为指定属性值后跟-及其他内容的元素。
- 若元素的属性值为多个且第一个属性值并不为指定属性值加-。那么元素不会进行匹配。不过相反，若是第一个属性值为指定元素值加-，无论后面有几个元素，有什么样的内容，该元素都会被选中。
例如
title = "t1-1 t2 t3"的元素，会被[title|="t1"]选中。但title = "t2 t1-1 t3"的元素不会被选中。
- 若属性值为单个且为指定元素值，或是属性值为单个且为指定元素值加-，之后随意跟内容。那么该元素会被选中。
匹配属性值列表中存在特定值的选择器
元素或通用选择器[属性名~="属性值"]若是指定元素支持指定属性，且指定属性的属性值的中 指定属性值为属性值的集合中的一个项【以空格为分隔符】或是属性值的唯一值，那么选择器会选中该元素。
例如：
[class~='t1']的作用其实就相当于.t1
注意img[title~="life"]也会选中<img title="life is best thing" src="1.png" alt="1">这个元素。
匹配属性值字符串形式包含特定子串的选择器
元素或通用选择器[属性名*="属性值"]若是为指定标签且对应的属性的值的字符串形式包含指定的属性值字符串形式，那么就选中该元素。
例如
title = "test12 test2"的元素，选择器为[title*="test"]就会将该元素选中。
匹配属性值字符串形式以特定子串开头的选择器
元素或通用选择器[属性名^="属性值"]若是为指定标签，且对应的属性的属性值是以指定属性值的字符串形式开头的，则该元素被选中。
匹配属性值字符串形式以特定子串结尾的选择器
元素或通用选择器[属性名$="属性值"]若是为指定标签，且对应的属性的属性值是以指定属性值的字符串形式结尾的，则该元素被选中。
不区分大小写的属性选择器
若是想要使用属性选择器，但是，希望属性选择器在属性值匹配的过程中忽略大小写差异，那么可以正常写属性选择器，只不过写完后在属性选择器的]前加i【注意有一个空格】。
例如
input[class|="t1" i]这样的选择器可以匹配到<input type="text" class="T1-kjsha t2">
注意
id与class的大小写问题
在HTML文档中，id与class的属性值是区分大小写的，所以必须保证选择器和元素的属性值的大小写是一致的。
ID选择器、类选择器、属性选择器、伪类选择器、伪元素选择器前可加元素选择器
使用ID选择器、类选择器、属性选择器、伪类选择器、伪元素选择器时，可以在这些选择器前面加元素选择器，表示当选择器生效时的元素必须为指定标签的元素。
若是没有加元素选择器的话，则默认被隐式地加上了通用选择器。
例如：
.h{} /*实际上相当于 *.h */
a.h{} /*被选择的元素为标签为a且class中有h的元素。 */
