解析CSS编写中的属性优先级问题

作者：互联网

2026-03-30

HTML教程

当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的常用法则。

样式距离我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式，此时的优先级是:

外部样式 < 内部样式 < 内联样式这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如：

CSS Code复制内容到剪贴板

1. "text/css">
2. div{color:blue;}//内部样式
4. "stylesheet"type="text/css"href="mystyle.css"/>//外部样式(color:green)
5. "color:red">mycolor

//内联样式

此时显示的优先级是 red > blue > green。所以 my color 显示为红色。

特殊的计算方法假设有下面这段代码：

CSS Code复制内容到剪贴板

1. "text/css">
2. divp.classSelector{color:blue}
3. #idselectorp{color:red}
5. "idSelector">
6. "classSelector">mycolor

我们面对下面的 css，如何判断优先级呢？

1. "text/css">
2. divp.classSelector{color:blue}
3. #idselectorp{color:red}

这里介绍一种特殊的计算方法：

元素, 伪元素: 1 – (0,0,0,1)类, 伪类, 属性: 1 – (0,0,1,0)ID: 1 – (0,1,0,0)内联样式: 1 – (1,0,0,0)这里的属性指的是：

效果如下：

优先级从上往下依次增加，至于如何计算，同样举例说明：

p: 1个元素– (0,0,0,1)div: 1个元素 – (0,0,0,1)#idSelector: 1个ID – (0,1,0,0)div#idSelector: 1个元素, 1个ID – (0,1,0,1)div#idSelector p: 2个元素, 1个ID– (0,1,0,2)div#idSelector p.classSelector: 2个元素, 1个类, 1个ID – (0,1,1,2)所以现在我们再来看上面的例子：

1. divp.classSelector{color:blue}-(0,0,0,1)+(0,0,0,1)+(0,0,1,0)=(0,0,1,2)
2. #idselectorp{color:red}-(0,1,0,0)+(0,0,0,1)=(0,1,0,1)

由于优先级上 (0,1,0,1) > (0,0,1,2)，所以我们知道最后显示的颜色为红色。

继承继承是个比较好理解的概念，即子元素会继承父元素的样式。例如：

1. "color:red">

2. mycolor