<html>
<head>
<title>复制内容</title>
<style> <!-- 第1种在网页<head>标签里直接写入<style> -->
.abc{ font-size:10pxcolor:red }
</style>
<link href="./xxx.css" rel="stylesheet" /><!-- 导入外部的CSS链接 -->
</head>
<body>
<p class="abc">我是网页<head>标签里直接写入<style></p>
<p style="font-size:20pxcolor:blue">456</p> <!-- 第三种直接在标签里写入style=""-->
</body>
</html>
最近发现一个比较奇怪的问题，就是在开发vue中，路由点击跳转到另外一个组件中，样式是不出来的，然后刷新当前页面css样式才加载出来，找了好久才发现这个bug。
进入以后样式是这样的：css样式根本没有加载，这是为什么？
刷新了页面以后才可以出来，本身样式也是这样的：
找了半天原因，一点一点测试才发现
原来渲染的组件的父盒子的class='item'居然影响了css样式的内容，很奇怪，把class='item'修改成比如：class='abc'就可以了。
原文地址和更多信息：
https://www.3mooc.com/front/articleinfo/465
这是个打包的问题。所有组件化都有这个问题。其实题主这个问题，我觉得按照页面级别打包比较好。毕竟用户进了页面a，不一定会进入页面b。按需加载啦。对于组建来说：组件颗粒度很小的时候，页面加载的角度来说整体引入css比较好。但是组建颗粒度不太小的时候，也可以把css加在js里。怎么爽怎么来。至于编出来的代码各种style标签，给浏览器看的代码，没有性能问题就好。es6不还要用babel编译成es5么，不也是各种用我表个态：我是css打在组建里的那一派。你看这个页面就有37个style。阿里旅行双11召唤页合并css派 @Saviio
