从左往右 从上到下依次排序 flex css_CSS 知识总结|精选博客

今天，我大致来总结一下我近期学习到的CSS的知识点，对这些内容进行一个回顾与整理。
我们大致从以下几方面进行整理和回顾：1. CSS简介2. CSS的选择器3. CSS样式4. 文档流与盒模型5. CSS布局6. CSS定位7. CSS动画

CSS简介

CSS的历史

CSS的全称为：Cascading Style Sheets，层叠样式表。它是由李爵士的挪威同事赖先生在1994年提出的。

CSS的版本

目前使用最广泛的版本为CSS2.1，它是在2004年~2011年之间不断完善形成的。其他版本还包括1996年发布的CSS1，1998年发布的CSS2以及1999年就开始的CSS3.目前的CSS已经是分模块进行升级，所以并没有CSS4这种说法。

CSS特点

• 样式层叠

• 选择器层叠

• 文件层叠

CSS选择器

分类

1. 元素选择器；

2. ID选择器，用“#”开头，加上ID名；

3. 类选择器，用“.”开头，加上类名；

4. 通用选择器，用“*”开头，选中的是页面上所有元素；

5. 属性选择器，用“[ ]”开头，将属性包起来；

6. [attr]{ }，选择包含attr属性的所有元素，不论attr的值是多少；

7. [attr = val]{ }，仅仅选择attr属性值为val的所有元素；

8. [attr ~= val]{ }，仅仅选择attr属性的值中包含val值的所有元素；

9. [attr *= val]{ }，选择attr属性中包含字符串val的元素；

10. [attr ^= val]{ }，选择attr属性的值以val开头(包含val)的元素；

11. [attr $= val]{ }，选择attr属性的值以val结尾(包含val)的元素；

12. [attr |= val]{ }，选择attr属性的值以val或者val-开头的元素；

13. 组合选择器

14. A,B:表示同时选中A和B；

15. A B:表示选中A的后代B；

16. A>B:表示选中A的直接子元素B；

17. A+B:表示选中A的下一个相邻元素；

18. A~B:表示选中A后的N个相邻元素；

19. AB：表示选中同时满足A和B的元素。

伪类

1. first-child 、last-child 、nth-child(n)

2. 表示作为自己父级元素的第几个孩子。

3. first-of-type 、last-of-type