插件窝 干货文章 css选择器的优先级从高到低是

css选择器的优先级从高到低是

选择 strong 样式 元素 822    来源:    2024-10-22
css 选择器的优先级从高到低:1. 行内样式;2. id 选择器;3. 类选择器;4. 类型选择器;5. 通用选择器;6. 属性选择器;7. 伪类选择器;8. 伪元素选择器;当优先级相同,后面声明的样式覆盖前面样式,行内样式优先于外部样式表样式。

CSS 选择器的优先级

CSS 选择器的优先级决定了当多个选择器匹配同个元素时,哪个选择器生效。优先级较高的选择器会覆盖优先级较低的选择器。

优先级从高到低如下:

  1. 行内样式

    立即学习“前端免费学习笔记(深入)”;

    • 直接写在 HTML 元素 style 属性中的样式。
  2. ID 选择器

    • 以 # 符号开头的选择器,用于匹配带有特定 ID 的元素。
  3. 类选择器

    • 以 . 符号开头的选择器,用于匹配带有特定类的元素。
  4. 类型选择器

    • 匹配 HTML 元素类型的选择器,例如 p(段落)或 div(区块)。
  5. 通用选择器

    • * 符号,匹配任何元素。
  6. 属性选择器

    • [] 符号,用于匹配具有特定属性或属性值(例如 [type="text"])的元素。
  7. 伪类选择器

    • 以 : 符号开头的选择器,用于匹配处于特定状态的元素(例如 :hover)。
  8. 伪元素选择器

    • 以 :: 符号开头的选择器,用于匹配元素的特定部分(例如 ::before)。

当有多个相同优先级的选择器匹配同个元素时,遵循以下规则:

  • 后面声明的样式会覆盖前面声明的样式。
  • 相同元素上的行内样式始终优先于外部样式表中的样式。