一、选择器进阶
1、复合选择器
1.1 后代选择器：空格
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素 选择器的语法：选择器1 选择器2{css} 注意点： 后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过空格隔开
1.2 子代选择器：>
作用：根据HTML标签的嵌套关系，选择父类元素子代中满足条件的元素 选择器语法：选择器1>选择器2{css} 注意点： 子代只包括：儿子 子代选择器中，选择器与选择器之间通过>隔开
2、并集选择器：，
作用：同时选择多组标签，设置相同的样式 选择器语法：选择器1，选择器2{css} 注意点： 并集选择器中的每组选择器之间通过，分隔 并集选择器中的每组选择器可以是基础选择器或者复合选择器 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
⭐3、交集选择器：紧挨着
作用：选中页面中同时满足多个选择器的标签 选择器语法：选择器1选择器2{css} 注意点： 交际选择器中的选择器之间是紧挨着的，没有东西分隔 交际选择器中如果有标签选择器，标签选择器必须写在最前面
例：
<style>
/* 交集选择器 是既又的关系 紧挨着 */
/* div.box：既是div又有.box类名 */
div.box {
color: red;
}
/* .boxdiv => 类名为 boxdiv */
/* .box.nav => 既有box类名又有.nav类名 */
/*.box.nav {
color: green;
}*/
</style>
</head>
<body>
<div class="box nav">导航</div>
<p class="box">文字</p>
<div class="nav">凑数的</div>
</body>
</html>
可以看到在style标签中 div.box 的意思是在div标签下类名叫box的标签设置样式：颜色为红色。
⭐4、hover伪类选择
作用: 选中鼠标悬停在元素上的状态，设置样式 选择器语法：选择：hover{css} 注意点：伪类选择器选中的元素的某种状态
⭐二、背景属性
1、背景颜色：background-color（bgc）
注意：背景颜色不能撑开盒子大小
2、背景图片：background-image（bgi）
注意：背景图片不能撑开盒子大小
3、背景平铺：background-repeat（bgr）
默认值： background-repeat: repeat; 平铺 no-repeat 不平铺 repeat-x 沿着x轴平铺 repeat-y 沿着y轴平铺
4、背景位置：background-position（bgp）
默认值： background-position: left top; background-position: 0 0;
5、背景相关属性连写
background: color image repeat position;
6、补充 img标签和背景图片的区别
img和背景的区别，img是内容，背景是装饰，装饰在内容下面
⭐三、元素显示模式
1、块级元素
display: block; 1、独占一行 2、可以设置宽高 3、默认宽度和父级一样，高度由内容撑开
2、行内元素------------------------元素间有缝隙
display: inline; 1、一行多个 2、不能设置宽高 3、默认宽高由内容撑开
3、行内块元素----------------------元素间有缝隙
display: inline-block; 1、一行多个 2、可以设置宽高
4、元素显示模式转换
目的:某些情况下我们需要让元素设置宽高，所以需要转换 display: block => 将任意元素转换为 块元素
5、补充 html标签的嵌套注意事项 p里不能嵌套块级元素 a里面不能嵌套a
⭐四、三大特性
1、继承性
2、层叠性
五、拓展：Chrome调试工具-查错流程（经验）
遇到样式不出来时，学会通过调试工具找错！！！ 查错流程 1、右击检查 2、哪里不会点哪里 在elements找到对应的元素 3、看styles中有没有自己设置的选择器 如果没有，一般是选择器写错了 常见原因1：选择器单词拼错 常见原因2：选择器结构写错 4、如果选择器有，但是样式没出来 看是否有删除线（没生效） 常见原因1：样式被注释 常见原因2：样式被覆盖 看是否有小三角形（报错） 属性名或者属性值有错误 常见原因1：属性值后没有分号 常见原因2：出现中文标点 常见原因3：属性名或者属性值单词拼错
六、思维导图
1483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
