CSS的选择器和三大特性

一、CSS的选择器

 选择器分为基础选择器和复合选择器两大类。

① 基础选择器：由单个选择器组成。

• 标签选择器
• 类选择器
• id 选择器
• 通配符选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	选中所有相同标签	不能差异化选择	较多	p{color:red;}
类选择器	选出一个或多个标签	可以根据需求选择	较多	.nav {color: red;}
id 选择器	一次只能选出一个标签	一个 id 属性在页面中只能出现一次	一般配合 js 使用	#nav {color: red;}
通配符选择器	选择所有标签元素	选择的太多，有部分不需要	特殊情况使用	* {color: red; }

② 复合选择器：由基础选择器组合而成。 

• 后代选择器
• 子选择器
• 并集选择器
• 伪类选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只能选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号，.nav, a
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover{}
:focus 选择器	选择获得光标的表单	跟表单相关	较少	记住input:focus用法

其他伪类选择器：

1.first-child

:first-child 是 CSS 伪类，表示父元素的第一个子元素。

2. last-child

:last-child CSS 伪类 代表父元素的最后一个子元素。

3. nth-child(n)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 :nth-child括号中表达式 (an+b) 匹配到的元素集合 (n=0，1，2，3...)

4. :not(p)

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

5. ::after (:after)

CSS 伪元素 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 

.exciting-text::after {
  content: "<- 让人兴兴兴奋!";
  color: green;
}

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.

6. ::before (:before)

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 使用 ::before 伪元素的一个简单示例就是用于加入引号。

HTML

<q>一些引用</q>, 他说, <q>比没有好。</q>.

CSS

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

 二、CSS的三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级。

① 层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

• 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

② 继承性

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

• 恰当使用继承可以简化代码，降低 CSS 的复杂性
• 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）

 行高的继承性

body {
  font: 12px/1.5 Microsoft Yahei;
}

• 行高可以跟单位也可以不跟
• 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• 此时子元素的行高是：当前子元素的文字大小*1.5
• body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高

③ 优先级

当一个元素指定多个选择器时，就会有有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重如下所示。

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

p {
  color: pink !important;
}

注意

• 继承的权重为 0，即使加了 important 权重也还是 0。
• a 链接，浏览器默认指定了一个样式，蓝色，下划线，不会继承父级样式

复合选择器权重的叠加

权重可以叠加，需要计算权重，但是没有进位。