本文旨在帮助读者快速回顾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