CSS相关知识点整理(超详解高度塌陷)

本文旨在帮助读者快速回顾CSS的一些重要知识点
(解决高度塌陷讲的很清楚一定要看啊😂)

1.CSS常用选择器

    元素选择器：可以通过标签来选中指定的元素
    语法:标签名{}
    例子：p{},h1{},div{}
    
    id选择器 只有唯一确定id
    语法: 首先在body确定id的名值对 然后在head修改 #id的属性值{}
    例子 #red{}

    class选择器(类选择器) 可以确定多个class
    语法：首先在body确定class的名值对 然后在head修改 .class的属性值{}
    例子.blue{}

    交集选择器 同时确定标签和属性值  希望元素满足多个条件时可以选择它，元素可以不止包含这些条件
    语法:选择器1选择器2选择器3选择器n{}    
    例子:div.red{}
    注意:如果交集选择器中有元素选择器，则必须元素选择器开头

    并集选择器 
    作用，同时选择多个选择器对应的元素  
    语法:选择器1,选择器2,选择器3{}
    例子 h1,div.red{}

    子元素选择器
    作用：选择指定父元素的指定元素
    语法:父元素>子元素

    后代元素选择器
    作用:选定指定元素内的所有指定后代元素
    语法:祖先 后代

    下一个兄弟选择器
    作用:指定平级关系中的后一个元素
    语法:前一个 + 下一个(只能紧挨着的下一个兄弟)
    或者:兄~ 弟 (兄后面所有的弟元素)

    属性选择器
    作用:选择有指定属性的元素
    语法:标签名[属性名]{}  或者 标签名[属性名=属性值]{}
    或者标签名[属性名^=属性值]以指定值开头的元素
    或者标签名[属性名$=属性值]以指定值结尾的元素
    或者标签名[属性名*=属性值]含有该值的元素
    例子p[title];p[title = 'abc']

2.伪类选择器

伪类用来描述元素的一个特殊状态 该元素是真实存在于结构层中的
比如第一个元素，被点击的元素，鼠标移入的元素
伪类一般情况下都是使用冒号开头
:first-child :last-child :nth-child(n) :nth-child(n+1)
2n或even表示偶数 2n+1或者odd表示奇数

3.伪元素

伪元素表示页面中并不真实存在的元素
伪元素使用::开头
::before(表示元素的位置，指针在第一个字母前面)
::after(表示元素最后的位置，指针在最后一个字母后面)
before 和 after 必须结合coutent属性使用
例子:在div标签的前面加一个内容填充abc，字体颜色为灰色的元素。

div::before{content:‘abc’;color: gray;}

4.选择器权重

当通过不同的选择器选择相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突
选择器的权重:
内联样式 1000
id选择器100
类和伪类选择器 10
元素选择器1
通配选择器*0
继承的样式没有优先级
分组选择器 如a