伪元素:
不常用
- ::first-letter:选中第一个文字
- ::first-line:选中第一行文字
常用【配合(content:增加内容,默认为行内式)使用】
【可用于在元素最前方区域或最后方添加文字】
**
- ::before:在元素最前面的空白区域添加样式
- ::after:在元素最后面的空白区域添加样式
****【常用于解决外边距重叠和浮动高度塌陷的问题】
- ::selection:改变选中元素的样式
**
选择器的优先级(权重问题):
- 同一个css样式括号中,给元素设置相同样式时,后面写的样式会覆盖掉前面写的样式
- 同理权重相同时,给元素设置相同样式时,后面写的样式会覆盖掉前面写的样式
在样式冲突时,需要考虑权重问题
- 权重不同时,给元素设置相同样式,权重大的会覆盖掉权重小的样式
权重的大小为
- !important(最高)>行内式(1000)>id选择器(100)>class选择器(10)>标签选择器(1)>通配符选择器(0)
单位:
长度单位
- px:固定像素
- 百分比(%):动态像素(部分是基于父元素的百分比)
颜色单位
- 颜色英文名:以颜色的英文命名,打出对应名字即可,如blue=蓝色
- #000000=#000:取值范围16进制0-f
- #00000000:前面同上,后两个0表示透明度
- RGB:R[红色],G[绿色],B[蓝色]。写法rgb(0,0,0)取值范围是0~255
- RGBa:前面同上,后面的a表示透明度,写法rgb(0,0,0,0)透明度的取值范围是0~1
- hsl:写法为(色相,饱和度,亮度)(数字,百分比,百分比)
- hsla:前面同上,后面的a表示透明度,写法为(色相,饱和度,亮度,透明度)
其他单位
- em:1em=自身字体大小
- rem:1rem=根元素字体大小
- 根元素=html
- 伪类选择器补充
- :root:根元素
虎哥小知识:
在写css样式时,宽和高可以简写为,宽度:w100(表示宽度为100px),高度:h100(表示高度为100px)。这位知识更是重量级熬