CSS 优先级

CSS优先级

单个选择器的优先级:
行内样式 > id选择器 > class选择器 > 标签选择器
多个选择器的优先级:
多个选择器的优先级，一般情况下，指向越准确，优先级越高。

计算权重

特殊情况下，我们需要"假设"一些值：

## 选择器：            优先级：

 - 标签选择器			优先级为1 
 - 类选择器			优先级为10 
 - Id选择器			优先级为100 
 - 行内样式			优先级为1000
 -  !import			∞ 无穷大

当选择器，选择上了某个元素的时候，那么要这么统计权重：

计算 id的数量，类的数量，标签的数量，最终谁优先级越高用谁的样式

如果权重（优先级）一样，那么以后出现的为准

*注意： 不进位，实际上能进位（255个标签，等于1个类名）但是没有实战意义！

如果大家都是0（没有选中某个元素、都是继承上去的）：

就近原则 谁描述的近用谁的
如果一样近，比权重，权重不同，谁大用谁的
权重相同，谁写在后面用谁的
简单示例：

同一个标签，携带了多个类名：

<p class="spec1 spec2">我是什么颜色？</p>
<p class="spec2 spec1">我是什么颜色？</p>

和在标签中的类名的顺序无关，只和 css 选择器的顺序有关：

.spec2{
    color:blue;
}

.spec1{
    color:red;
}

红色的；因为 css 选择器中 .spec1 写在后面

!important 标记

  • important 语法：
  • Key:Value !important; Key 为css属性名，Value 为对应的属性值
  • 用来给一个属性提高权重；这个属性的权重就是无穷大
  • 一定要注意语法：
    正确的：
font-size:60px !important;

注： 不能将 !important 写在语句的外面，感叹号不能省略

!important 需要强调3点：

  • !important 提升的是一个属性，而不是一个选择器

CSS:

p{
    color:red !important;  /* → 只写了这一个!important，所以就字体颜色属性提升权重*/
    font-size: 100px ;     /* → 这条属性没有写!important，所以没有提升权重*/
}
#para1{
    color:blue;
    font-size: 50px;
}
.spec{
    color:green;
    font-size: 20px;
}

HTML:

<p class="spec" id="para1">我是p标签</p>

所以，综合来看，字体颜色是red（听 important的）；字号是50px（听id的）。

!important无法提升继承的权重，该是0还是0

比如HTML结构：

<div>
    <p>哈哈哈哈哈哈哈哈</p>
</div>

CSS样式：

div{
	color:red !important;
}
p{
	color:green;
}

由于div是通过继承性来影响文字颜色的，所以 !important 无法提升它的权重，权重依然是0。干不过p标签，因为p标签是实实在在选中了，所以字是绿色的（以p为准）

!important 不影响就近原则

如果大家都是继承来的，按理说应该按照“就近原则”，那么 important 能否影响就近原则呢？

  • 影响是不可能影响的，这辈子都不可能影响的；远的，永远是远的；不能给远的写一个 important，干掉近的
    在开发网站的时候，不建议使用 !important ；因为会让 css 写的很乱