vue css样式需要刷新才能加载出来

html-css08

vue css样式需要刷新才能加载出来,第1张

最近发现一个比较奇怪的问题,就是在开发vue中,路由点击跳转到另外一个组件中,样式是不出来的,然后刷新当前页面css样式才加载出来,找了好久才发现这个bug。

进入以后样式是这样的:css样式根本没有加载,这是为什么?

刷新了页面以后才可以出来,本身样式也是这样的:

找了半天原因,一点一点测试才发现

原来渲染的组件的父盒子的class='item'居然影响了css样式的内容,很奇怪,把class='item'修改成比如:class='abc'就可以了。

原文地址和更多信息:

https://www.3mooc.com/front/articleinfo/465

就不解释什么内联样式、内部样式、外部样式了,不够直观,通俗点或者直观点说好了:

第一优先级是标签上用style设置的css,例如:<div style="样式"></div>

第二优先级是html页面上在<style></style>内设置编写的css,例如:

<style> .divcss{样式}</style>

第三优先级是在html页面上引用外部的css样式表,例如:

<link href="文件路径" rel="stylesheet" media="screen" />

无论说法是叫优先级还是是加载顺序,都不重要,只要你有这么一个概念就好了,优先级越高,当碰到调用2个或2个以上同类型css的时候,只会调用优先级最高的那1个,要记住,每个标签上只能调用同类型css一次,比如你设置了宽度width:200px那么你再在其他调用方式中设置了width:300px或其他值,那么只会按优先级调用1个width值,其他的将会是无效值,不过切记,只是在这个标签上失效