CSS：选择器与三大特性

---

CSS的选择器用于选择修饰对象，简单来说，选择器就是根据需求把不同的标签选出来，使CSS的修饰具有针对性。

CSS基础选择器

标签选择器

语法：

标签名 {
	属性: 属性值;
}

标签选择器是指以HTML标签名称作为选择器，按照标签名称分类，选中页面内所有的指定标签，

示例：

在示例中，我们使用了p {}来选择页面中的所有<p>标签，随后所有的<p>内的文字都被修饰为了红色。

这种选择器可以快速为页面中的标签设置统一的默认样式，缺点就是不能对同类标签进行差异化设置，一次只能选中所有标签。

---

类选择器

语法：

.类名 {
	属性: 属性值;
}

类选择器，可以用于差异化设置标签。对需要修饰的内容，对其加上一个类：class = "类名"。

比如对一个div标签加上一个类：

<div class="nav">这是div内的文字</div>

这样div就得到了一个名为nav的类，之后就可以通过类选择器来选中带有nav类的标签了：

.nav {
	color: red;
}

多个不同的标签可以使用同一个类名，从而实现对多个标签选中：

示例中，对span，div，p各使用了一个nav的类，使用类选择器后，color： red；就对所有带有nav类的标签生效了。

此外，一个标签也可以带有多个类名，从而被多个选择器选中修饰，每个类名之间用一个空格隔开：

	<div class="类名1 类名2">这是div内的文字</div>

示例：

对于带有多个类名的标签，多个类名会同时生效。

---

id选择器

语法：

#id名 {
	属性: 属性值;
}

对需要修饰的内容，对其加上一个id：id = "id名"。

比如对一个div标签加上一个id：

<div id="nav">这是div内的文字</div>

id选择器与类选择器极为相似，最大的区别就是：

• 类选择器可以使多个标签具有同一个类而对多个标签生效
• id选择器只能对一个标签生效

类选择器就好比人的名字，一个名字也可以被多个人使用。选择器就好比人的身份证号码，全国每个人的身份证号码都是唯一的。

---

通配符选择器

在CSS中，*称为通配符。我们在需要选中所有元素时，可以使用通配符选择器：

* {
	属性: 属性值;
}	

这种选择器内部的CSS修饰，会对页面内所有元素生效：

* {
	margin: 0;
	padding: 0;
}	

---

CSS复合选择器

在CSS中，可以根据选择器的类型吧选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。

复合选择器可以更准确，更高效的选择目标元素。

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套的时候，内层标签就成为外层标签的后代。

语法：

元素1 元素2{
	属性: 属性值;
}

注意点：

1. 元素1和元素2直接按用空格分开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素2可以是儿子，孙子等，只要是元素1的后代即可
4. 元素1和元素2可以是任意基础选择器

上图中div span {}选择器的意思就是：选中div标签内的所有span。

此处使用的元素1和元素2都是标签选择器，也可以改为其它的选择器：

上图中.blue span选择器意思就是：选中blue类标签内部的所有span。

---

子选择器

子元素选择器，与后代选择器十分相似，但是只选择最近一级的子元素，也就是就是选择亲儿子。

语法：

元素1>元素2{
	属性: 属性值;
}

注意点：

1. 元素1与元素2之间用大于号隔开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素1和元素2可以是任意基础选择器

示例：

上图中div > span{}选择器意思就是：选中div标签内部的最近一级span。

相比于之前的后代选择器，子代选择器只选中了第一个span，因为p中的span和div隔了一个p，导致其成为了div的孙子，而不是亲儿子，所以没有选中。

---

并集选择器

并集选择器可以选中多组标签。并集选择器是将各种选择器通过逗号链接而成，任何形式的选择器都可以成为并集选择器的一部分。

语法：

元素1,元素2{
	属性: 属性值;
}

上图中选择器的目的是：同时选中元素1与元素2。

示例：

此处的并集选择器，同时选中了h2和h4标签。

两个元素可以是任意选择器，包括其他的复合选择器：

此处的并集选择器，并上了一个后代选择器与一个子代选择器。

---

伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第n个元素。

伪类选择器用冒号(:)表示，比如: hover，: first-child。

链接伪类选择器

• a: link 选择未被访问的链接
• a: visited 选择已被访问的链接
• a: hover 选择鼠标指针位于其上方的链接
• a: active 选择活动链接（鼠标按下未弹起的链接）

示例：

上面的链接在一次点击后，转换了四次颜色，分别就是四个伪类选择器对应的效果。

这种伪类选择器也不仅仅可以作用与a链接，只要你需要在移动鼠标后产生交互，都可以尝试这个伪类选择器。

注意：这种链接伪类选择器在使用时，一定要按照link，visited， hover， active书写，否则无法产生对应效果。

---

:focus 伪类选择器

：focus 伪类选择器用于选取获得焦点的表单元素，所谓焦点就是光标，也就是当你的光标在哪个表单上，哪个表单就会被这个选择器选中。

示例：

示例中有三个表单，我们用:focus选中了表单，对其修饰天蓝色背景。这样一来，只要我们的光标在哪里，哪一个表单的背景色就会变成天蓝色。

---

CSS三大特性

层叠性

当两个选择器都对一个元素修饰了相同的样式，会发生什么？

p {
color: red;
font-weight: 700;
}

p {
color: skyblue;
}

<p>这是一个段落</p>

请问这个p标签，最后呈现了什么颜色，是粗是细?

这就涉及到了层叠性：

当两个选择器都对一个元素修饰了相同的样式，此时后一个样式就会覆盖（层叠）掉前一个样式。

在上方示例中，第二个skyblue的修饰比red的修饰离p更近，所以最后skyblue会把red覆盖掉。

那么font-weight呢？

在第二个标签中，虽然它离p更近，但是它没有修饰font-weight，所以没有发生冲突，也就没有把font-weight覆盖掉，最后font-weight: 700;还是会执行。

所以最后文字表现为天蓝色，粗体：

---

继承性

在CSS中，子标签会继承父标签的某些样式，比如文本颜色和字号。

示例：

上图中，div被修饰了字体颜色为红色，粗体。但是我们并没有对p修饰，p作为div的子代，继承了div的字号和颜色，也展现了红色粗体。

一般来说，以text-,font-,line-开头的属性以及color具有继承性。

---

优先级

当一个元素被多个选择器选中，有两种情况：

选择器冲突：

选择器相同：执行层叠性
选择器不同：执行优先级

选择器的优先级取决于选择器的权重：

选择器	权重
从父级继承 / 通配符*	0.0.0.0
标签选择器	0.0.0.1
类选择器 / 伪类选择器	0.0.1.0
id选择器	0.1.0.0
行内样式style=""	1.0.0.0
!important 修饰	∞

示例：

在示例中，我们依次对<p>使用了：继承红色，类选择器绿色，id选择器蓝色，行内样式黄色。依次取消注释，发现优先级id 选择器> 类选择器 > 标签选择器。

此外，CSS还提供了一个!important，其作用于某个属性后，使其可以无视优先级产生作用：

虽然类选择器优先级比不过行内和id选择器，但是由于!important，最后还是产生了绿色效果。

---

权重的叠加：

刚刚我们的优先级是基于基础选择器的，而复合选择器是会包含多个基础选择器的，此时就会发生权重的叠加。

计算几个选择器的权重作为示例：

• div ul li 权重：0.0.0.1 + 0.0.0.1 + 0.0.0.1 = 0.0.0.3
• .nav ul li 权重：0.0.1.0 + 0.0.0.1 + 0.0.0.1 = 0.0.1.2
• a:hover 权重：0.0.0.1(a) + 0.0.1.0 (:hover)= 0.0.1.1
• .nav a 权重：0.0.1.0 + 0.0.0.1 = 0.0.1.1

权重的叠加只需要在相应的位上相加即可，选择器的权重不会进位，比如十一个标签选择器的权重累加，其最终权重为0.0.0.11，仍然小于0.0.1.0。

提权：

现在我们有两个选择器，第一个选择器选中了：div里面的ul里面的li，第二个选择器选中了ul里面的li，最后执行的是红色，这是为什么？

计算一下权重：

• div ul li 权重为：0.0.0.1 + 0.0.0.1 + 0.0.0.1 = 0.0.0.3
• ul li 权重为：0.0.0.1 + 0.0.0.1 = 0.0.0.2

两个选择器权重不同，最后展现为权重高的红色，如果我们想在不破坏第一个选择器的情况下，让字体颜色变为天蓝色，此时就需要对第二个选择器进行提权。

我们看到，div是带有一个类名nav的，只要我们对第二个选择器加上这个类，其权重就会变成 0.0.1.2，文字就可以展现天蓝色了。

---