1、选择器进阶 1.1.1 后代选择器 重点 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素(选中子孙后代)
问题1:后代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开?
答:
选择器1 选择器2{属性:属性值;属性:属性值;}
空格隔开
问题2:后代选择器最终选中的元素是父元素还是子元素?
答:
子元素
后代选择器选中子孙后代
<ul>
<li>我要改变颜色</li>
<li>我要改变颜色</li>
<li>我要改变颜色</li>
</ul>
<!-- 2 使用后代选择器 让 ol 里面的小li字体设置为粉色 字体大小20px -->
<ol>
<li>我要变色并且改变字体大小</li>
<li>我不变</li>
<li>我不变</li>
1.1.2 子代选择器 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素(只能选中亲儿子)
问题1:子代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开?
答:
选择器1> 选择器2{属性:属性值;属性:属性值;}
隔开
问题2:子代选择器最终选中的元素是父元素还是子元素?
答:子代选择器最终选择的是子元素--->亲儿子
1.1.3 并集选择器 作用：同时选择多组标签，设置相同的样式.
问题1:并集选择器的语法格式是什么？元素之间使用什么符号分开？
答:
选择器1,选择器2{属性:属性值;属性:属性值;}
元素之间使用,隔开,最后一个选择器的后面不用加逗号
问题2:并集选择器可以使用基础选择器或者复合选择器吗?
答:
可以.
并集选择器通常一行写一个,提高代码可读性
熊二
光头强- 小猪佩奇
- 猪爸爸
- 猪妈妈
1.1.4 交集选择器 作用：选中页面中 同时满足 多个选择器的标签
问题1:交集选择器的语法格式是什么？选择器之间需要分隔吗?
答:
选择器1选择器2 { 属性:属性值;属性:属性值;}
不需要分隔.
问题2:交集选择器中如果有标签选择器,标签选择器写在哪里呢?
答:标签选择器必须写在最前面
作用：选中鼠标悬停在元素上的状态，设置样式
E:link 未访问的链接(把没有点击过的(访问过的)链接选出来) E:visited 已访问的链接(访问过的链接) E:hover 鼠标经过时的连接 E:active 鼠标按下未弹起时的链接 问题1:伪类选择器的语法格式是什么,他的作用是什么?
答:选择器:hover{属性:属性值;}
问题2:书写:hover的时候有什么注意事项?
答::号的前面与后面都不能用空格
1.1.5 Emmet语法 作用：通过简写语法，快速生成代码,提高编码效率
2、背景相关属性 2.1.1 背景颜色 问题1:设置背景颜色使用哪个属性,快捷键是?
答:background-color:背景颜色 快捷键:bgc
问题2:背景颜色属性的默认值是什么?
答:transparent(透明色) rgba(0,0,0,0)
问题3:背景颜色属性为rgba格式时第四个值表示什么意思?
答:透明度,默认是0,透明度的区间是0-1
2.1.3 背景图片 应用场景:网页的logo 装饰图片 超大背景图 精灵图
问题1:设置背景图片使用哪个属性,快捷键是?
答:background-image:背景图片 快捷键:bgi
问题2:背景图片属性的属性值格式是什么样的？
答:background-image:url(图片名称)
问题3:背景图片可以撑开盒子吗?
答:背景图片不可以撑开盒子.
问题4:背景图片和背景色的显示层级是?
答:背景图片在上,背景色在下
2.1.4 背景平铺 问题1:设置背景平铺使用哪个属性,快捷键是?
答:background-repeat:背景平铺 快捷键:bgr
问题2:在使用背景图片时，默认背景是平铺的吗？
答:默认是平铺的
问题3:背景平铺有哪些属性,有Z轴吗？
答:repeat|no-repeat|repeat-x|repeat-y
2.1.5 背景位置 问题1:设置背景位置使用哪个属性,快捷键是?
答:
background-position:背景位置 快捷键:bgp
background-position:水平方向 垂直方向
问题2:方位名词分别对应哪些方位?
答:
水平方向:left / right / center
垂直方向:top / bottom / center
问题3:背景位置属性的取值有哪些？
答:
方位名词
精确单位(数字+px[坐标])
混合单位(第一个取值表示水平，第二个取值表示垂直)
2.1.6 背景连写 问题1:背景相关属性连写的属性名是？
答:background
问题2:背景相关属性连写有顺序要求吗？推荐写法是?
答:
没有顺序要求
background:color image repeat position;
各个属性之间使用空格隔开
2.1.7 img标签和背景图片的区别 img标签可以撑开盒子,一般展示重要的图片,比背景图要清晰
背景图片不可以撑开盒子.(需要设置盒子的宽高),超大的图片和logo以及精灵图
3、元素显示模式 元素显示模式就是元素（标签）以什么方式进行显示，比如div独占一行，比如一行可以显示个span。
3.1.1 块级元素 问题1:块级元素的display属性的属性值是？
答:display：block
问题2:块级元素有什么特点?
答:
独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高
可以存放其他行内元素和块级元素 文本
问题3:块级元素的代表标签有哪些？
答:div、p、h系列、ul、li、ol、dl
3.1.2 行内元素 问题1:行内元素的display属性的属性值是？
答:display：inline
问题2:行内元素有什么特点?
答:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
只能容纳文本或其他行内元素
问题3:行内元素的代表标签有哪些？
答:span a em 等
3.1.3 行内快元素 问题1:行内块元素的display属性的属性值是？
答:display：inline-block
问题2:行内块元素的显示特点有哪些？
答:
一行可以显示多个
可以设置宽高
问题3:行内块元素的代表标签有哪些？
答:input button textarea
3.1.4元素显示模式转换 目的：改变元素默认的显示特点，让元素符合布局要求.
三种转换模式代码:
display: block 转换为块元素
display: inline-block 转换为行内块元素
display: inline 转化为行内元素（使用较少）
案例:
代码块:
html
css/* 1 设置div盒子宽度 高度 背景颜色 */ .nav { width: 234px; height: 420px; background-color: #555; }
/* 2. 将 a 标签转换为块级元素，设置默认显示属性 */
.nav a {
display: block;
width: 234px;
height: 42px;
color: #fff;
font-size: 14px;
text-decoration: none;
text-indent: 2em;
line-height: 42px;
}
/* 2. 设置 a 标签鼠标经过状态 */
.nav a:hover {
background-color: #f70;
}
3.1.5 HTML嵌套规范注意点 问题1:块元素可以嵌套哪些元素?有什么注意事项?
答:
文本、块级元素、行内元素、行内块元素等等
p标签中不要嵌套div、p、h等块级元素 h系列标签也一样.
问题2:a标签可以嵌套哪些元素?有什么注意事项?
答:
a标签可以嵌套任意元素
a标签不能嵌套a
4、CSS 三大特性 4.1.1 继承性的介绍 问题1:CSS三大特性是什么?
答:继承性 层叠性 优先级
问题2:继承性的特性是什么？有哪些常见的属性可以继承?
答:
子元素有默认继承父元素的某些样式
文本属性 字体属性 行高 颜色属性
如
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
4.1.2 继承的小应用 好处：可以在一定程度上减少代码 常见应用场景：
问题1可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
4.1.3继承失效的特殊情况 a标签的color会继承失效
h系列标签的font-size会继承失效
div的高度不能继承，但是宽度有类似于继承的效果
4.1.4 层叠性 相同选择器设置相同的样式就会出现样式层叠
问题1:如果给同一个标签设置了相同的属性，此时样式会出现什么情况？
答:会层叠覆盖，写在最后的会生效
问题2:如果给同一个标签设置了不同的样式，此时样式会出现什么情况？
答:
会层叠叠加，共同作用在标签上
注意点:当样式不冲突时,要先考虑优先级,才能通过层叠性去进行判断
