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 写的很乱