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

作者：只影天涯发布日期:2025-11-13 浏览:47

/* 示例代码 */

/* 优先级从高到低排列 */
/* 1. 行内样式 (直接在HTML标签中定义的style属性) */
<p style="color: red;">行内样式的优先级最高</p>

/* 2. ID选择器 (#id) */
#myId {
    color: blue;
}

/* 3. 类选择器 (.class)、属性选择器 ([attribute]) 和伪类选择器 (:hover) */
.myClass {
    color: green;
}

/* 4. 标签选择器 (element) 和伪元素选择器 (::before, ::after) */
p {
    color: black;
}

/* 5. 通用选择器 (*) 和子选择器 (>), 相邻兄弟选择器 (+) 等 */
* {
    margin: 0;
    padding: 0;
}

解释说明：

行内样式：直接在HTML标签中定义的style属性，优先级最高。
ID选择器：使用#id的形式，优先级次之。
类选择器、属性选择器和伪类选择器：这些选择器的优先级相同且低于ID选择器。
标签选择器和伪元素选择器：这些选择器的优先级较低。
通用选择器和其他组合选择器：优先级最低。

如果需要更复杂的优先级计算，可以参考每个选择器的权重值。

上一篇：style.css

下一篇：css作用