css优先级问题及样式不生效
程序员文章站
2022-06-07 14:07:39
...
很多人在做项目事总会出现样式不生效,即便是优先级很大也是不奏效。这种原因首先你要看是不是先后顺序的问题。至于有哪些选择器我就不必多说了。
简单说一下优先级。
复杂的计算方法:
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
那么问题来了,看下列代码,
标签内的文字是什么颜色的?
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案:red。与样式定义在文件中的先后顺序有关,即是后面的覆盖前面的,与在
推荐阅读
-
SpringCache @Cacheable 在同一个类中调用方法,导致缓存不生效的问题及解决办法
-
CSS3关于z-index不生效问题的解决
-
mongoose设置unique不生效问题的解决及如何移除unique的限制
-
CSS样式不生效错误排查
-
vue打印局部区域样式CSS错乱不生效
-
解决ElementUI自定义CSS样式不生效的问题
-
CSS样式优先级和权重问题(部分)
-
解决ie动态修改link样式,import css不刷新的问题
-
常见样式问题六、CSS长度单位(px、em、rem等)及相关内容
-
jsp页面跳转后,css样式不生效,刷新页面后才出现样式_html/css_WEB-ITnose