20220715 html伪元素与选择器的优先级

181 阅读2分钟

伪元素:

不常用

  • ::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)。这位知识更是重量级熬