简单理解CSS选择器权重问题！

什么是权重？

权重简单来说就是相对重要程度，如果放在CSS中代表的含义就是给同一块内容赋予不同的样式，权重高者样式才会生效！权重低则不生效！

示例：

假设有一个p标签，我们要设置颜色，单独类选择器权重高于标签选择器，所以生效！
<p class="p-tag">我是一个p标签<p>

// 权重高 -- 生效
.p-tag {
    color=red
}

// 权重低 -- 没有生效
p {
    color=green
}

单独选择器权重值

值越高权重越高，在给相同内容设置不同样式适合，权重高者生效！

1. !important：权重最高，但是没有结构和上下文所以不推荐使用！
2. inline style：行内样式 -- 权重值 1000
3. #id：id选择器 -- 权重值 100
4. .class：类选择器/伪类选择器/属性选择器 -- 权重值 10
5. elements：元素选择器 -- 权重值 1

所以显而易见，单独选择器权重从高到低：
!important>行内样式>id选择器>类选择器>元素选择器

混合使用权重计算

公式：权重值 * 数量

示例1： 如下示例中权重值111大于101，所以color:red会生效

/* 权重值：100 + 10 + 1 = 111 */
#root .chair p {
    color:red
}

/* 权重值：100 + 1 = 101 */
#root p {
    color:blue
}

示例2： 如下示例中权重值计算为：100 + 1 + 100 + 1 + 10 = 212

#selsect dl#colo dd:first-line{
    color:red
}

有两个示例基本应该就可以明白的，只要记住权重值大的生效即可！