复合选择器

概念：所谓复合选择器，就是由两个或者多个基础选择器，通过不同的方式组合而成的。

后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或者元素组的子孙后代

其语法：

父级 子级{属性:属性值; 属性:属性值;}

例如：.class h3{color:red; font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代；

也就是说，父级标签能选择任何包含在内的标签。

子元素选择器

作用：子元素选择器都只能选择作为子元素的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 ==>==进行连接。

注意：子元素选择器选择的是亲儿子，不是子孙后代

交集选择器

使用条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，又有标签二的特点。
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称

并集选择器

应用：如果某种选择器定义的相同样式，就可以利用并集选择器，可以让代码更加简洁

用法：各个选择器通过逗号连接而成，通常用于集体声明，所有的选择器都会执行后面的样式

***链接伪类选择器（重点）***

 作用：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。

 - a:link      /* 未访问的链接 */
 - a:visited   /* 已访问的链接 */
 - a:hover     /* 鼠标移动到链接上 */
 - a:active    /* 选定的链接 */

注意：写的时候，顺序尽量不要颠倒，按照 lvha 的顺序。否则可能会引起错误。
**LV**包包 ，非常**ha**o

之所以叫链接伪类，所以都是利用交集选择器 a:link      a:hover  ，因为在a链接具有默认样式，所以

在实际工作中都需要给链接单独给指定样式。例如：

```css
a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}

a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
链接伪类选择器	给链接更改状态	给链接添加特殊效果	较多	重点记住a:hover{}的样式

标签的显示模式

一般html标签分为块标签和行内标签两种类型，也称块元素和行内元素。
块级元素的特点：

1. 独占一行
2. 高度、宽度、外边距以及内边距都可以控制。
3. 宽度默认是容器（父级元素的宽度）的100%。
4. 是一个容器及盒子，里面可以放行内或者块级元素，是个没有语义的标签。

注意：行内元素不可以放块级元素。

行内元素：常见的行内元素有a、strong、b、em、i、del、s、ins、span，其中span标签用的最多，i和em 标签也有用。

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个。
2. 高度和宽度设置是无效的。
3. 默认宽度就是他本身内容的宽度。
4. 行内元素只能容纳文本或者其他行内元素。

注意：链接里面不能再放链接

特殊情况a里面可以放块元素，但是给a转换一下块级模式最为安全

行内块元素：在行内元素有几个特殊的标签例如img、input、td，可以对他们设置宽高，有的资料会称他们是行内块元素。

行内块元素的特点：

• 和相邻行内块元素在一行上显示，有空白间隙，一行可以显示多个
• 默认宽度就是它本身内容的宽度。
• 宽高、内外边距都可以控制。
  标签显示模式转换
• 块转行内:display:inline;
• 行内转块：display:block;
• 块、行内元素转行内块：display:inline-block;
  css三大特性：

1. 层叠性
2. 继承性
3. 优先级

层叠性：所谓的层叠性就是多种样式的叠加。

这是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么前一个属性就会被层叠掉。
原则：

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

继承性：子标签会继承父标签的某些样式，如果想要设置一个可继承的属性，只需将他应用于父元素即可。

注意：

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

优先级：定义样式时，出现多个规则应用在同一个元素上，此时：

• 选择器相同，执行层叠性
• 选择器不同，考虑优先级

权重（优先级）大小排列：
！important >行内样式 > id 选择器 >类（伪类）选择器 >标签（元素）选择器 >继承或者通配符（*）

权重就算公式：

标签选择器	计算权重公式
继承或者*	0，0，0，0
标签选择器	0，0，0，1
类，伪类	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

权重叠加

我们经常使用交集选择器，后代选择器，多个基础选择器进行组合，就会出现圈权重叠加的问题。例如：

• div ul li ---->0,0,0,3
• .nav ul li ---->0,0,1,2
• a:hover ---->0,0,1,1
• .nav a ---->0,0,1,1

注意：

• 数位之间没有进制，比如说0，0，0，5+0，0，0，5=0，0，0，10而不是0，0，1，0，所以不会存在10个div能赶上一个类选择器的情况。
• 继承的权重是0。