CSS 复合选择器

1. CSS复合选择器

可以选择更准确更精细的目标元素标签

---

1.1 后代选择器

概念：当标签发生嵌套时，内层标签是外层标签的后代

作用：用来选择元素组下的某种元素标签

语法：父级 某层子级 {属性:属性值}

例：div p {} 选择 div 下所有的 p 标签

---

1.2 子代选择器

作用：选择元素组的下一级元素标签

语法：父级>子级 {属性:属性值}

例：div>p {} 选择 div 的下一级 p 标签

---

1.3 交集选择器

由两个选择器构成，既有标签的特点，又有类的特点

语法：标签类名 {属性:属性值}

例：p.one {} 选择即是 p 标签 又是 .one 类

---

1.4 并集选择器

定义相同样式时，同时选择多个选择器集体声明

语法：选择器1, 选择器2, 选择器3 {属性:属性值}

例：p, .one, #two {} 选择 p 标签和 .one 类和 #two类

---

1.5 链接伪类选择器

给链接添加特殊效果（链接有默认样式，需单独指定）

语法	说明
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标悬停链接上
a:active	鼠标点击链接时

注意：顺序尽量不要颠倒，按照 l v h a 的顺序

a {   /* a是标签选择器  所有的链接 */
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候变成了红色 */
}

---

1.6 复合选择器总结

选择器	作用范围	特征	常用	隔开符号	例如
后代选择器	元素组下的某种元素标签	所有的子孙后代	多	空格	.nav a
子代选择器	最近一级元素	只选亲儿子	少	大于号	.nav>p
交集选择器	标签与类的交集	既是标签，又是类	少	无符号	p.one
并集选择器	相同样式的元素	可以用于集体声明	多	逗号	.nav, .header
链接伪类选择器	给链接更改状态	更改默认样式	多	冒号	a:hover

---

2. 标签显示模式 (display)

标签以什么方式进行显示，比如 div 占一行，span 一行可以放很多个

标签的类型(分类)：块元素和行内元素

2.1 块级元素

常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

特点：

• 独占一行
• 宽度默认是100%
• 可设置高度，宽度、外边距、内边距
• 是一个容器或盒子，里面可以放行内或者块级元素

注意： p 标签里面不能放块级元素、文字类块级标签

---

2.2 行内元素

常见的行内元素有：<a>、<strong>、<b>、<ins>、<img>、<span>等

特点：

• 相邻行内元素在一行上，一行可显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能再放链接
• a里面可以放块级元素

---

2.3 行块内元素

标签：<img />、<input />、<td>

特点：

• 相邻行内元素在一行上，一行可显示多个
• 可设置高度，宽度、外边距、内边距
• 默认宽度就是它本身内容的宽度

---

2.4 三种模式总结区别

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	独占一行	可以设置大小	容器的100%	容器，可以包含任何标签
行内元素	一行显示多个	不可以直接设置大小	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行显示多个	可以设置大小	它本身内容的宽度

---

2.5 标签显示模式转换

转换方式	属性
块转行内	inline
行内转块	block
块、行内转换为行内块	inline-block

---

3. 行高 (line-height)

行高 = 上距离 + 内容高度 + 下距离

垂直居中：文字的行高等于盒子的高度

---

4. CSS 背景 (background)

---

4.1 背景颜色 (color)

语法：background-color:颜色值;（默认透明）

---

4.2 背景图片(image)

语法：background-image: url (图片地址) （无需引号）

---

4.3 背景平铺 (repeat)

语法：background-repeat: （默认背景平铺满）

参数	作用
no-repeat	背景图像不平铺
repeat-x	背景图像横向平铺
repeat-y	背景图像纵向平铺

---

4.4 背景位置(position)

语法：background-position: x y;

属性类型：

• 精确坐标：百分数（单位 %）| 数字（单位 px）

• 方位名词：top、bottom 、left、right、center

  注意：前后顺序可无序

注意：

• 必须先指定 background-image 属性
• 两种属性类型混合使用，必须前 x 后 y
• 如果只有单个值，另一个值默认 center

---

4.5 背景附着

背景是滚动的还是固定的

语法：background-attachment: （默认背景滚动）

• fixed：背景图像固定

---

4.6 背景简写

将背景设置缩减成一行写

语法：background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;（参数必须按顺序）

例：background: gray url(ms.jpg) no-repeat fixed center top;

---

4.7 背景透明(CSS3)

语法：background: rgba(0, 0, 0, 0.3);

注意：

• 最后一个参数是 alpha 透明度，取值范围 0~1之间
• 可以把 0.3 的 0 省略掉
• 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本不支持

---

4.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat | no-repeat | repeat-x | repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll |fixed
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 可无序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

---

5. CSS 三大特性

---

5.1 CSS层叠性

在两个相同的选择器有相同的样式，仅生效最后的样式

---

5.2 CSS继承性

可被元素组下继承的样式：text-，font-，line- 系列，color 属性

---

5.3 CSS优先级

定义CSS样式时，出现两个或更多规则应用在同一元素上：

• 选择器相同：层叠性替换
• 选择器不同：权重优先级

(1) 权重计算公式

标签选择器	权重公式
继承或者 *	0,0,0,0
标签选择器	0,0,0,1
类 / 伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style	1,0,0,0
!important 重要的	优先级最高

(2) 权重叠加

通常会有多个选择器组合而成，就会出现权重叠加

算法：权重公式逐位相加，权重值越大优先级越高

注意：

• 值从左到右，一级大于一级，左面的最大
• 数位之间没有进制，级别之间不可超越
• 如果权重相同，就近原则

例：

• div ul li ------> 0,0,0,3
• .nav div #sex ------> 0,1,1,1
• 十个标签选择器 ------> 0,0,0,10

(3) 继承的权重是 0

修改样式，一定要看该标签有没有被选中

• 如果选中了，那么权重公式来计算，谁大听谁的
• 如果没有选中，那么继承的权重为 0

---