选择器进阶 复合选择器
后代选择器
结构
选择器1 选择器2 {css}
作用：
先通过选择器1找到一堆标签，再一堆标签的后代（儿子、孙子、重孙子....）中找到满足选择器2的标签，设置样式
子代选择器
结构
选择器1>选择器2 {css}
作用：
先通过选择器1找到一堆标签，再一堆标签的子代（儿子）中找到满足选择器2的标签，设置样式
并集选择器
结构
选择器1,选择器2 {css}
作用：
找到选择器1和选择器2对应的标签，设置样式
注意点
1、并集选择器中可以同时写多个选择器，多种选择器，选择器之间以逗号隔开
交集选择器
结构
选择器1选择器2 {css}
作用：
（既又原则）
找到页面中既满足选择器1又满足选择器2的标签，设置样式
注意点
1、交集选择器中可以同时写多个选择器，多种选择器，选择器之间紧挨着的
2、如果交集选择器中有标签选择器，此时标签选择器必须写在第一个
emmet语法
hover伪类选择器
鼠标悬停的状态
背景相关属性
background-color
背景颜色
取值
关键字
rgb表示法
rgba表示法
十六进制表示法
<background-image>
背景图片
取值
`url`( 图片的路径 )
<background-repeat>
背景平铺 取值 1、平铺
<repeat>
2、不平铺
<no-repeat>
3、沿着水平方向平铺
<repeat-x>
4、沿着垂直方向平铺
repeat-y
<background-position>
背景位置 取值
1、方位名词（最多只能表示9个位置）
水平方向
left
center
right
垂直方向
top
center
bottom
2、数字+px（坐标）
坐标系
原点（0,0）
盒子的左上角
x轴
水平向右
y轴
垂直向下
操作
将图片左上角与坐标点重合即可
连写形式
属性名
background
属性值
单个属性值的合写，取值之间以空格隔开
注意点
书写顺序
推荐：color image repeat position
省略问题
按照你的需求省略
特殊情况
如果盒子的大小和背景图片一样大，此时可以直接写background：url();
如果需要设置单独的样式和连写
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
img标签和背景图片的区别
img标签
不设置宽高会显示默认宽高
div + 背景图片
需要给div设置宽高
因为背景图片只是一个css样式，不是html中的内容，不能撑开div标签
元素显示模式 块级元素
display：block
特点
1、独占一行
2、宽度默认占满一行，高度默认由内容撑开
3、可以设置宽高！！
代表标签
div
p
h系列标签
行内元素
display：inline
特点
1、一行可以显示多个
2、宽度和高度默认都是由内容撑开
3、不可以设置宽高！！！
代表标签
a
span
行内块元素
display：inline-block
特点
1、一行可以显示多个
2、可以设置宽高
代表标签
input
特殊情况
img标签有行内块元素的特点，但是调试工具中显示默认显示模式为inline
三种显示方式的转换
display
块级元素
block
行内元素
inline
行内块元素
inline-block
html的嵌套规范
1、a标签中不能嵌套a标签
2、p标签中不能嵌套div、h系列标签常见的块级元素
居中方法再总结
水平居中
text-align：center；
1、文本
2、行内元素
如：span、a
3、行内块元素
如：input、img
注意点：如果需要让以上元素水平居中，此时直接以上元素的父元素设置即可
margin：0 auto；
1、块级元素
注意点：直接给当前元素设置的
垂直居中
line-height
单行文本
CSS 三大特性 1、继承性
子承父业：子元素有默认继承父元素样式的效果
有哪些常见的样式可以继承
1、color
2、font-相关的属性
3、text-相关的属性
4、line-height：行高
继承的小应用
去除列表默认的样式（小圆点）
ul { list-style：none； }
统一不同浏览器默认文字大小
谷歌浏览器默认文字大小：16px
不同浏览器可能显示的默认字体大小不一致，开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致
继承失效的特殊情况
1、a标签的颜色会继承失效
其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2、h系列标签的font-size会继承失效
其实已经继承下来了，但是被浏览器默认设置的样式给覆盖掉了
3、div的高度不能继承，但是宽度有继承的效果
因为div有独占一行的特性
2、层叠性
1、给同一个标签设置了相同的属性
此时样式会覆盖
最后写在下面的会生效
2、给同一个标签设置了不同的样式
此时样式会叠加
最后会共同作用在标签上
前提：只有当优先级相同是，此时才会比较层叠性
3、优先级
拓展：Chrome调试工具-查错流程（经验） 遇到样式不出来时，学会通过调试工具找错！！！ 查错流程
1、右击检查
2、哪里不会点哪里
在elements找到对应的元素
3、看styles中有没有自己设置的选择器
如果没有，一般是选择器写错了
常见原因1：选择器单词拼错
常见原因2：选择器结构写错
4、如果选择器有，但是样式没出来
看是否有删除线（没生效）
常见原因1：样式被注释
常见原因2：样式被覆盖
看是否有小三角形（报错）
属性名或者属性值有错误
常见原因1：属性值后没有分号
常见原因2：出现中文标点
常见原因3：属性名或者属性值单词拼错
