css伪类选择器优先级（css伪类选择器顺序）

科技前沿 • 2025-04-26 18:46 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

CSS选择器用于定位（选择）HTML页面中的元素，从而为它们添加样式。主要有以下几种：

讯享网

元素选择器

- 直接以HTML元素名称作为选择器，如 p 会选择所有的 <p> 段落元素， h1 会选择所有的 <h1> 标题元素。这是最基本的选择器类型，会将样式应用到文档中该类型的所有元素。

类选择器

ID选择器

- 以井号（#）开头，后面是自定义的ID名称。在HTML中ID应该是唯一的，比如 #header ，对应的HTML元素如 <div id="header"> ，这个选择器用于精准定位一个特定的元素。

后代选择器

- 由两个或多个选择器用空格分隔组合而成。例如 article p ，这会选择所有在 <article> 元素内部的 <p> 元素，它体现了元素之间的嵌套关系。

子元素选择器

CSS选择器的优先级是指当多个选择器应用于同一个元素并且定义了冲突的样式规则时，浏览器按照一定的规则来确定最终应用哪种样式。

内联样式

- 拥有最高优先级。内联样式是直接在HTML元素的 style 属性中定义的样式，如 <p style=“color: red;”> 。因为它是直接应用于元素自身，所以优先级最高。

ID选择器

- 优先级第二高。ID在页面中应该是唯一的，通过 # 来定义，像 #header 这样的ID选择器优先级较高，这是因为ID用于精准定位特定元素。

类选择器、属性选择器和伪类选择器

- 优先级低于ID选择器。类选择器以 . 开头，如 .classname ；属性选择器是根据元素的属性来选择元素，如 [type=“text”] ；伪类选择器用于选择元素的特定状态，像 :hover 。它们的优先级相同，在没有其他更高优先级规则存在时发挥作用。

元素选择器和伪元素选择器

- 优先级较低。元素选择器直接以HTML元素名称作为选择器，如 p 。伪元素选择器用于选择元素的特定部分，如 ::before 和 ::after ，它们优先级相同，当和更高优先级选择器冲突时，会被覆盖。

如果优先级相同，那么后面出现的样式规则会覆盖前面的。可以使用 !important 来强制让一个样式规则拥有最高优先级，但要谨慎使用，因为它会破坏CSS的优先级规则体系。