目录
一、选择器进阶
1.1后代选择器:空格
注意:
- 后代包括:儿子、孙子、重孙子......
- 后代选择器中,选择器与选择器之前通过空格隔开
例如:
效果:
1.2子代选择器:>
注意:
- 子代只包括:儿子
- 子代选择器中,选择器与选择器之前通过>隔开
例如:
效果:
2.1并集选择器:,
注意:
- 并集选择器中的每组选择器之间通过“ , ”分割
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
例如:
效果:
3.1交集选择器:紧挨着
注意:
- 交集选择器中的选择器之间是紧挨着的,没有东西分隔
- 交集选择器中如果有标签选择器,标签选择器必须写在最前面
例如:
效果:
4.1hover伪类选择器
注意:
- 伪类选择器选中的元素的某种状态
例如:
效果:
5.1emmet语法
二、背景相关属性
1.1背景颜色
注意:
- 背景颜色默认值是透明:rgba:(0,0,0,0)、transparent
- 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
例如:
效果:
2.1背景图片
例如:
效果:
3.1背景平铺
例如:
效果:
4.1背景位置
注意:
- 方位名词取值和坐标可以混用,第一个取值表示水平,第二个取值表示垂直
例如:
效果:
5.1背景相关属性的连写形式
注意:
- 如果需要设置单独的样式和连写:
- 要么把单独的样式写在连写下面
- 要么把单独的样式写在连写里面
例如:
效果:
6.1(拓展)img标签和背景图片的区别
三、元素显示模式
1.1块级元素
例如:
效果:
2.1行内元素
例如:
效果:
3.1行内块元素
例如:
效果:
4.1元素显示模式转换
例如:
效果:
拓展1:HTML嵌套规范注意点
例如:
效果:
四、css特性
1.1继承性介绍
注意:
- 可以通过调试工具判断样式是否可以继承
例如:
效果:
注意:如上图所示,如果标签本身带有css属性则不继承父标签属性
2.1层叠性的介绍
注意:
- 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
例如:
效果:
注意:优先级相同时,后面的效果层叠前面的效果