简单理解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
}

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

作者:fanyi6原文地址:https://segmentfault.com/a/1190000042255423

%s 个评论

要回复文章请先登录注册