CSS 选择器的下一个重点：
- 复合选择器：后代选择器；并集选择器。
- 标签显示模式(display)。
- CSS背景位置、背景图片等。
- CSS三大特性：优先级。
一、CSS复合选择器
css 的基础选择器不能满足快速开发要求，所以要使用复合选择器。
复合选择器可以更准确更精细的选择目标元素。它由两个或多个基础选择器，用不同的方式组合而成。
1、后代选择器（重点），用空格选择
也叫做包含选择器，可用来选择元素或元素的子孙后代。写法是先把外层标签写在前，内层标签写在后面。例如：父级 子级{属性1: 属性值1; 属性2: 属性值2;}
示例：.class h3 { color: red; font-size: 16px;}
2、子元素选择器，用大于符号选择（>）
只能选择子标签，不能选择孙子标签。写法是：父级标签写在前面，子级标签写在后面，中间用大于符号（>）连接。
示例语法：.class>h3 {color: red; font-size:16px;}
还可以根据关系继续选择下去：.class>h3>span {color: red; font-size:16px;}
注意：只能用来选择子标签（或者叫亲儿子），不能选择孙子标签
3、 交集选择器，用点选择
由两个选择器构成，找到的标签必须满足标签一的特点，也有标签二的特点。例如：
h3.class {color: red;}
第一个为标签选择器，第二个为 class 选择器，两个选择器之间用点连接，不是空格。如：h3.nav
4、并集选择器（重点），用逗号选择
- 可以对多个标签或多个类使用同一个样式，减少代码量 。并集选择器用英文逗号（,）连接而成。
- 任何形式的选择器都可以作为并集选择器一部分，包括标签选择器、类选择器、id选择器。
简单示例语法：.nav,h3 {color: red;}
这里选择了一个标签有class属性值是 nav 的，并且还选择 h3 标签。
5、 链接伪类选择器（重点），用冒号选择
- 可以给某些选择器添加特殊效果，比如给选择器添加特殊效果，比如可以选择第1个，第n个元素。
- 伪类选择器有很多，比如链接伪类，结构伪类等，这里先说链接伪类。
链接伪类主要在下面4个：
a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */ a:hover /* 鼠标移动到链接上 */ a:active /* 选定的链接，是鼠标按下去未松开时的状态 */
上面4个的顺序不能乱，要按照 lvha 顺序，否则可能引起错误。
- 记忆法：love hate。又比如：lv包包，非常 hao。
- 链接伪类都是用的交集选择器，如：a:link，a:hover。
由于 a 链接有默认的样式，实际运用中可以给链接单独指定样式。在实际使用中很少4个全写的，示例如下：
a { /* a是标签选择器，选择所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器，表示鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
6、复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 选择元素后代 | 选择所有的子孙后 | 代较多 | 空格分隔，如 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是">" 如：.nav>p |
| 交集选择器 | 两个标签交集的部分 | 既是，又是 | 较少 | 没有符号，如p.one |
| 并集选择器 | 常用于批量设置 | 可以用于集体声明 | 较多 | 符号是逗号，如：.nav, .header |
| 链接伪类选择器 | 更改链接状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
二、标签显示模式（display）重点
标签的三种显示模式（块级、行内、行内块），这三种的特点和区别，以及它们的相互转化。
1、标签显示模式
通常一个页面上的标签非常的多，不同的地方会用不同类型的标签来完成需要的页面。
HTML 标签分为块级标签和行内标签，也可叫块元素和行内元素。
2、块级元素（block-level）
常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 div 标签是最典型的块元素。
块级元素的特点，非常重要，一定要记下来：
（1）、自己独占一行。
（2）、高度（height）、宽度（width）、外边距及内边距都可以控制。
（3）、宽度默认是容器（父级宽度）的100%。
（4）、是一个容器及盒子，里面可以放行内或者块级元素。
注意：
（1）、只有文字才能组成段落，因此 p 里面不能放块级元素，特别是 p 标签里面不能放 div 标签。
（2）、同理，还有这些标签<h1>~<h6>、dt，都是文字类型块级标签，里面不能放其他块级元素。
3、行内元素（inline-level）
常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素，也叫做内联元素。
行内元素的特点，非常重要，一定记住：
（1）、相邻行内元素在一行上，且一行可以显示多个。例如一行可以有多个 a 标签。
（2）、高度、宽度直接设置是无效的，也就是不能直接设置高度和宽度。
（3）、默认宽度就是它本身内容的宽度。
（4）、行内元素只能容纳文本或其他行内元素。（重点）
要注意的：
（1）、链接里面不能放链接。
（2）、特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。
4、行内块元素（inline-block）
在行内元素中有几个特殊的标签，<img>、<input>、<td>，可以对它们设置宽度、高度和对齐属性，有些地方也叫行内块元素。
行内块元素的特点：
（1）、和相邻行内元素（行内块）在一行上显示，但是之间会有空白缝隙。一行可以显示多个。
（2）、默认宽度就是它本身内容的宽度。
（3）、高宽度、行高、外边距以及内边距都可以控制。
5、三种显示模式总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
6、标签显示模式转换属性：display
- 块级标签转行内标签使用：display: inline;
- 行内标签转块级标签使用：display: block;
- 块级、行内标签转换为行内块标签使用：display: inline-block;
除这三个外，还有其它的显示模式。
示例：把块级标签转为行为标签，如div标签。转换后不能设置宽度和高度：div {display: inline;}
示例：把行内标签转换为块级标签，如 span 标签，转换后可以设置宽度和高度：span {display: block;}
示例：把块级标签转换为行内块，如 div 标签，转换后一行可以放多个，并且可以设置宽度和高度：div {display: inline-block;}
7、行高（line-height）
- 使用行高可以实现文字垂直居中显示。
- 一行文字从上到下可以划分4条线，分别是：顶线、中线、基线、底线。
- 要测量文字的行高，可以根据上一行文字的基线到下一行文字的基线来测量，测出来的数字就是行高。
- 行高使用最多的情况就是：让文字在盒子内垂直居中对齐。只需要将文字的行高设置为盒子的高度（对于单行文字是这样的）。
行高分为三个部分：上距离、内容高度、下距离，用公式计算就是：
行高 = 上距离 + 内容高度 + 下距离
由于上距离和下距离总是相等，因此文字看上去是垂直居中的。
另外，行高与高度的三种关系：
（1）、如果行高等于盒子高度，单行文字会垂直居中。
（2）、如果行高大于盒子高度，单行文字会偏下。
（3）、如果行高小于盒子高度，文字会偏上。
三、CSS背景（background）
可以利用 css 的属性给盒子设置背景颜色，也可以利用 css 使用图片给盒子设置背景色。
1、用图片给盒子设置背景
这里要注意区分 css 的两个属性，分别是 color 和 background-color。color 属性是给盒子里面的文字设置颜色的，background-color 是设置盒子的背景颜色的，不要搞混了。
background-color 的语法如下：
background-color: 背景色;，这个语法的“背景色”默认值是 transparent，也就是透明的。
使用图片来给盒子设置背景色的属性是 background-image，语法如下：backgropund-image: none | url(url);
这个语法的默认值是 none，不使用背景图片。当使用 url 值时，使用绝对或相对地址指定背景图像，例如：background-image: url(images/demo.png);
注意：务必要注意地址的写法。默认背景图片是以平铺的方式显示的。另外，提倡背景图片后面的地址，url 不要加引号。
2、让背景图片平铺（repeat）
让背景图片平铺的属性是 background-repeat，默认属性值是 repeat，按照上下左右平铺。语法如下：
background-repeat: repeat | no-repeat | repeat-x | repeat-y
这个属性的各个参数作用如下：
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
要注意的是，在设置这个属性之前，必须要 background-image 这个属性。
3、背景图片的位置（position）设置，重点，一定要记住
位置按照横向、纵向来设置，这两个方向都可以使用数字或者方向来表示。用数字表示的是像素。语法如下：
background-position: length || length
background-position: position || position
这些参数值的含义如下：
| 参数 | 值 |
|---|---|
| length | 百分数，或者由浮点数字和单位标识符组成的长度值 |
| position | 有 top | center | bottom | left | center | right 等方位名词 |
注意点：
（1）、必须先指定 background-image 属性。
（2）、position 后面是 x 坐标和 y 坐标。可以使用方位名词或者精确单位。
（3）、如果指定两个值，两个值都是方位名字，则两个值的前后顺序可以互换，比如 left top 和 top left 效果一致。
（4）、如果只指定了一个方位名词，另一个值默认居中对齐。
（5）、如果 position 后面是精确坐标，那么第一个肯定是 x ，第二个一定是 y。
（6）、如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中。
（7）、如果指定的两个值是精确单位和方位名字混合使用，则第一个值是 x 坐标，第二个值是 y 坐标。
在实际工作中使用最多的，就是用背景图片居中对齐。
background-position: center top;
上面的设置，让横坐标始终居中，纵坐标始终在上，这样页面放在放大、缩小都能看到页面。
示例，例如要给一个小图片设置在盒子里的显示效果，可这样设置：
<style>
.icon {
width: 150px;
height: 35px;
background-color: pink;
background-image: url(images/sina.png);
background-repeat: no-repeat;
background-position: 10px center;
}
</style>
4、背景附着，就是设置背景图片是滚动的还是固定的
语法如下：
background-attachment: scroll | fixed
该属性的默认值是 scroll，表示是滚动的，设置为 fixed，则表示背景图像固定，不随滚动而变化，但是页面放大或缩小还是要变化。
5、背景简写
就像设置字体大小、样式时可以使用 font 单词来简写一样，设置背景同样可以简写，简写的属性名称是 background，这个属性值的书写顺序不像 font 一样有官方标准，这个属性是没有官方标准的。但还是建议按照下面的写法：
background: 背景色 背景图片地址 背景平铺 背景滚动 背景位置;
语法示例如下：
background: transparent url(image.jpg) repeat-y scroll center top;
6、背景半透明（CSS3）
用 rgb 方式设置背景颜色时，还可以再多一个值，这个值取值范围是 0~1，0表示不透明，1表示透明。语法如下：
background: rgba(0,0,0,0.3)
上面属性值设置的是白色（0,0,0），再加一个半透明是 0.3。
注意点：
（1）、最后一个参数是a（是alpha的简写），表示透明度 ，取值范围 0~1之间
（2）、习惯把0.3 的 0 省略掉 ，这样写 background: rgba(0, 0, 0, .3);
（3）、注意：背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
（4）、因为是CSS3 ，所以低于 ie9 的版本是不支持的。
7、设置背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| 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个值 |
四、CSS三大特性
css样式冲突采取的原则：就近原则。
哪些常见的样式会有继承：
要会用 css 优先级的算法，以及计算常见的选择器叠加值。
1、css 层叠性
层叠性是指多种 css 样式的叠加。也是浏览器处理冲突的一个能力，如果同一个属性通过两个不相同的选择器设置到同一个元素上，这个时候一个属性就会将另一个属性层叠掉。
原则：样式冲突时，遵循就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。
CSS层叠性最后的执行口诀：长江后浪推前浪，前浪死在沙滩上。
例如：
div {color: red;}
div {color: green;}
上面两行代码都在为 div 设置容器中的文字颜色，但是第二个 div 选择器离HTML的结构更近，所以第二个 div 选择器就会层叠掉第一个 div 选择器。
2、css 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。如果要设置一个可继承的属性，只需要将属性应用于父元素即可。
注意点：
（1）、适当的使用继承，可降低CSS样式的复杂性。当有多个子标签需要某个样式时，可以给父级标签指定一个，让子标签继承即可。
（2）、子标签可以继承父标签的样式有：text-，font-，line-，这些开头的属性是可以继承的，以及 color 属性可以继承。
CSS继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。
例如给一个 div 标签指定字体颜色和大小，可以让该 div 标签下的子标签继承：div {color: red; font-size: 18px;}
3、CSS优先级（重点）
在定义 css 时，经常出现两个或多个样式规则应用在同一个元素上的情况，此时，若选择器相同，则执行层叠性；若选择器不同，就会出现优先级的问题。
1）、权重计算公式
css 的权重可以用一套公式来计算，这个就是 CSS Specificity（特殊性），关于权重的计算公式如下所示：
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID选择器 | 0,1,0,0 |
| 每个行内样式 | style=""1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
解释：
- 权重值从左到右，左边的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- CSS权重用一套公式计算，例如 0,0,0,5 + 0,0,0,5 = 0,0,0,10 注意这个计算结果没有进制，这个就是 CSS Specificity（特殊性）。
- !important 的权重最高，用法：div {color: pink!important;}
2）、权重叠加
出现叠加的情况：使用交集选择器、后代选择器等多个选择器组合而成的时候。
权重叠加就是一个简单的加法计算，例如：
- div ul li，这是三个标签选择器，每个选择器的权重是 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
- .nav a 相加是：0,0,1,0 + 0,0,0,1 = 0,0,1,1
- a:hover 的权重是：0,0,1,1
注意：
权重的数位之间没有进制，比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0,1,0，所以不会存在 10 个标签选择器能赶上类选择器的情况。
3）、继承的权重是0
在修改样式时，一定要看该标签有没有被选中。如果被选中了，就可以按照上面计算权重的公式来计算。如果没有被选中，那么权重就是0，因为继承的权重为 0。例如：
<head>
<style>
div {
color: red;
}
p {
color: green;
}
/*因为demo 没有选p标签，所以 继承的权重为 0*/
.demo {
color: blue;
}
#test {
color: pink;
}
</style>
</head>
<body>
<div class="demo" id="test">
<p>继承的权重为 0</p>
</div>
</body>
上面代码中的 css 选择器，由于 div 选择器没有选中 p 标签，但是接下又用了 p 选择器。所以 p 内的样式会按照 p 选择器的样式来显示。在接下来又使用了类选择器、id 选择器，但这些选择器都没有选中 p 标签，所以样式还是按 p 选择器的来。
4、CSS 权重精化6题
第一题，代码如下：
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第1题</title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
由于样式中的两个选择器都选中了 div 标签，根据权重叠加原则可知，第一个选择器的权重更高，所以是答案是：蓝色。
第二题，代码如下：
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第2题</title>
<style type="text/css">
#father{
color:red;
}
p {
color:blue;
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
由于样式中，第一个选择器是类选择器，但是没有选中 p 标签，第二个选择器选中了 p 标签。根据继承的权重为 0 的原则，所以第二个选择器会有生效，答案是：蓝色。
第三题，代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me {
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
在这道题中，第一个选择器看似有很多个 div 选择器，好像权重很大样，但是这些权重加起来也没有类选择器的权重大，所以答案还是第二个选择器的蓝色。
第四题，代码如下：
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第4题</title>
<style type="text/css">
div p {
color:red;
}
#father {
color:red;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
这段代码中有三个 css 选择器，第一个是标签选择器，权重最低，首先被排除。第二个是 id 选择器，权重高，但是并没有选中 p 标签。第三个用了交集选择器，选择器中包含类选择器且直接选中了p标签，所以答案是：蓝色。
第五题，代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
第一选择器使用了类选择器，由于类选择器的权重没有 id 选择器权重高，首先第一个选择器被排除。第二个和第三个的权重是一样的，但第3个更靠近 html 结构，所以第三个选择器有效，答案是：黄色。
第六题，代码如下：
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第6题</title>
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
第二个和第三个的权重明显没有第一个高，首先排除这两个选择器。第四个是 id 选择器，但是没有直接选中 p 标签，不管是否使用了这个 !importtant 关键字，权重都没有第一个大，所以答案是第一个选择器的颜色：蓝色。
5、css 本节知识总结