一、选择器进阶
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:属性名或者属性值单词拼错
六、思维导图