一、link与@import区别
应用:
<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px; background: green; } </style> </head>两者都可以用于在CSS中引用外部样式表，但它们有以下不同之处：
语法不同：@import规则必须写在CSS文件的顶部，而link元素可以出现在文档的任何位置。
加载方式不同：@import是在页面渲染时再加载外部CSS文件。而link元素会在页面加载时同时加载外部样式表。
兼容性不同：@import在IE5以下的版本不被支持，而link元素没有兼容性问题。
权重不同: link方式的样式权重高于@import
- javascript支持: link 支持使用javascript改变样式（
document.styleSheets），后者不可因此，一般建议使用link元素来引用外部样式表，以提高网站的性能和兼容性。
二、css3/H5新特性
css3新特性
1.选择器
① 常规选择器：
:last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /* 按照奇数 */ :disabled /* 选择每个禁用的dom元素 */ :checked /* 选择每个被选中的dom元素 */ :not(selector) /* 选择非 selector 元素的每个元素 */ ::selection /* 选择被用户选取的元素部分 */② 伪类：
用于向某些选择器添加特殊的效果（没有创建新元素）
:last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */③伪元素：
创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器
::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */ ::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */ :first-letter /* 选择该元素内容的首字母 */ :first-line /* 选择该元素内容的首行 */ ::selection /* 选择被用户选取的元素部分 */根本区别在于它们是否创造了新的元素（抽象）
2.背景和边框
背景：
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于content-box、padding-box 或 border-box 区域边框：
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片3.文本效果
最低0.47元/天 解锁文章
1458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
