前端css进阶学习笔记

目录

一、选择器进阶

1.1后代选择器：空格

1.2子代选择器：>

2.1并集选择器：,

3.1交集选择器：紧挨着

4.1hover伪类选择器

5.1emmet语法

二、背景相关属性

1.1背景颜色

2.1背景图片

3.1背景平铺

4.1背景位置

5.1背景相关属性的连写形式

6.1（拓展）img标签和背景图片的区别

三、元素显示模式

1.1块级元素

2.1行内元素

3.1行内块元素

4.1元素显示模式转换

拓展1：HTML嵌套规范注意点

四、css特性

1.1继承性介绍

2.1层叠性的介绍

---

一、选择器进阶

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背景相关属性的连写形式

注意：

• 如果需要设置单独的样式和连写：

1. 要么把单独的样式写在连写下面
2. 要么把单独的样式写在连写里面

例如：

效果：

6.1（拓展）img标签和背景图片的区别

三、元素显示模式

1.1块级元素

例如：

效果：

2.1行内元素

例如：

效果：

3.1行内块元素

例如：

效果：

4.1元素显示模式转换

例如：

效果：

拓展1：HTML嵌套规范注意点

例如：

效果：

四、css特性

1.1继承性介绍

注意：

• 可以通过调试工具判断样式是否可以继承

例如：

效果：

注意：如上图所示，如果标签本身带有css属性则不继承父标签属性

2.1层叠性的介绍

注意：

• 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

例如：

效果：

注意：优先级相同时，后面的效果层叠前面的效果