css 选择器权重计算 |html css 兼容性问题

css选择器的权重值可以通过以下方式计算：

- 标签选择器权重值为1
- 类选择器、伪类选择器和属性选择器权重值为10
- id选择器权重值为100
- !important关键字可以使任何样式都变得最高优先级，但是它并不是选择器权重值的一部分

如果有多个选择器作用于同一个元素，那么它们的权重值将会被累加。比如：

p { color: red; }  /* 权重值为1 */
#main p { color: blue; } /* 权重值为101 */
main .test p { color: green; } /* 权重值为11 */

在这个例子中，如果某个p元素同时匹配到了这三个选择器，那么最终的颜色将会是绿色，因为权重值最高。

了解css选择器权重计算，可以更好地控制网页样式，避免样式冲突和无法覆盖的问题。