CSS伪类及优先级算法

231 阅读1分钟

CSS伪类

:frist-of-type: 选择每一个在其父元素中的第一个对应的子元素

image.png

:last-of-type:选择每一个在其父元素中的最后一个对应的子元素

image.png

:only-of-type:选择每一个属于其父元素中的唯一的元素

image.png

:first-child选择每一个在其父元素中的第一个子元素对应

image.png

:last-child:选择每一个在其父元素中的最后一个子元素对应

image.png :nth-child(n)选择每一个在其父元素中的第n个子元素对应

image.png n可以表示所有的对应的子元素 image.png 2n表示所有的偶数列的子元素

image.png 2n-1表示所有的奇数列的子元素

image.png

:nth-of-type(n)选择每一个在其父元素中的第n个对应的子元素

image.png ::before表示元素的内容之前插入内容
::after 表示元素的内容之后插入内容

image.png 优先级:

  • 优先级就近原则,同权重情况下样式定义最近者为准
  • !important > id选择器 > class类选择器 > tag标签选择器
  • !important 比内联优先级高,但内联比 id 要高
  • 比较优先级时 需要将所有的选择器进行相加计算。最后优先级越高,则越优先显示
  • 分组选择器是单独计算的
  • 选择器的累加不会超过最大的数量级,类选择器再加也不会超过id选择器