# 1. CSS优先级
# 1.1. CSS选择器的优先级关系
内联 > ID选择器 > 类选择器 > 标签选择器。
# 1.2. 浏览器具体的优先级算法是怎样的?
优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下:
- 如果存在内联样式,那么A = 1, 否则A = 0;
- B的值等于ID选择器出现的次数;
- C的值等于类选择器和属性选择器和伪类出现的总次数;
- D的值等于标签选择器和伪元素出现的总次数 。
这样子直接看好像也还是很明白 ,那先上个例子:
#nav-global > ul > li > a.nav-link
套用上面的算法,依次求出ABCD的值:
- 因为没有内联样式 ,所以A = 0;
- ID选择器总共出现了1次,B = 1;
- 类选择器出现了1次, 属性选择器出现了0次,伪类选择器出现0次,所以C = (1 + 0 + 0) = 1;
- 标签选择器出现了3次, 伪元素出现了0次,所以D = (3 + 0) = 3; 上面算出的A、B、C、D可以简记作:(0, 1, 1, 3)。
# 1.3. 怎么比较两个优先级的高低?
现在已经弄清楚了优先级是怎么算的了。但是,还有一个问题,怎么比较两个优先级的高低呢? 比较规则是: 从左往右依次进行比较 ,较大者胜出,如果相等,则继续往右移动一位进行比较 。如果4位全部相等,则后面的会覆盖前面的。
# 1.4. 覆盖内联样式方法
内联样式的优先级是最高的,但是外部样式有没有什么办法覆盖内联样式呢?有的,那就要!important
出马了。因为一般情况下,很少会使用内联样式 ,所以!important
也很少会用到!如果不是为了要覆盖内联样式,建议尽量不要使用!important
。
如果内联样式用了!important
,外部样式就没有办法了。所以千万不要在内联样式中使用!important
。
# 3. CSS类选择器并排
.nav .user
(中间有空格)匹配到.nav
的元素下面的.user
的元素.user.login
(中间没有空格)匹配到同时含有.user
和.login
的元素