你必须要知道的CSS特殊性概念

2020-05-05 07:56:11易采站长站整理

让我们来一起算算六个样式规则各自的特殊性的值:

第一个特殊性的值=2*100+2*1=202

第二个特殊性的值=2*100+1=201

第三个特殊性的值=1*100+1*10+3*1=113

第四个特殊性的值=1*100+1*10+2*1=112

第五个特殊性的值=1*100+1*10+1*1=111

第六个特殊性的值=1*100+2*10+3*1=123

清楚了吧,第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军,后面一些规则虽然看起来好像更复杂,但特殊性并不是拼谁的选择器表达式写得更长,ID选择器才是王道!

理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。

如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。如果这能解决问题,就说明样式表中其他地方很可能有更特殊的规则,它覆盖了你的规则。如果是这种情况,你可能需要检查代码,解决特殊性冲突,让代码尽可能简洁。