61,112
社区成员
发帖
与我相关
我的任务
分享一个关于css优先级的问题
css中link和@import优先级问题：假设
会调用style1还是style2?哪个优先级高？
<head>
<style type="text/css">@import url(http://www.zhui1.com/style1.css);</style>
<link href="http://www.zhui1.com/style2.css" rel="stylesheet" type="text/css" />
</head>
会调用style1还是style2?哪个优先级高？
...全文
请发表友善的回复…
发表回复
走在风中 2010-07-28
- 打赏
- 举报
俺是来学习滴。
Wings_JK 2010-07-27
- 打赏
- 举报
按html文档解析顺序，后面的会覆盖前面的，所以优先级高
籽沫 2010-07-26
- 打赏
- 举报
...嗯 他们的解析顺序是按照从上到下的
然后冲突的话 肯定是下面的css覆盖上面的
优先级别的话，首先出去覆盖样式，然后其他的优先级就按照css的优先级了 不过话又说话来我觉得不会存在优先级的别的问题，因为下面的样式都覆盖了第一个，那也就是以第二个为主了，当然这里的以第二个为主是指的在有相同的class或id下以第二个为主 如果不是相同的当然他们各读各的
不知道这么说楼主你理解没，我不敢说多了怕把你带晕了，我建议你最好自己测试下如果有其他问题给我留言就好了
然后冲突的话 肯定是下面的css覆盖上面的
优先级别的话，首先出去覆盖样式，然后其他的优先级就按照css的优先级了 不过话又说话来我觉得不会存在优先级的别的问题，因为下面的样式都覆盖了第一个，那也就是以第二个为主了，当然这里的以第二个为主是指的在有相同的class或id下以第二个为主 如果不是相同的当然他们各读各的
不知道这么说楼主你理解没，我不敢说多了怕把你带晕了，我建议你最好自己测试下如果有其他问题给我留言就好了
smyaqq 2010-07-26
- 打赏
- 举报
[Quote=引用 4 楼 nx8823520 的回复:]
汗……
哎 楼主应该问的不是他们的差异吧！
在css中优先级是按照的纠结远程，但是在html中，一般解析的时候是从上到下的，也就是它会先解析：
HTML code
<style type="text/css">@import url(http://www.zhui1.com/style1.css);</style>
然后在接着解析
HTML code……
[/Quote]
恩，我不是问两种方法的区别，而是问解析顺序，会不会发生冲突，优先级谁高？
汗……
哎 楼主应该问的不是他们的差异吧！
在css中优先级是按照的纠结远程，但是在html中，一般解析的时候是从上到下的，也就是它会先解析：
HTML code
<style type="text/css">@import url(http://www.zhui1.com/style1.css);</style>
然后在接着解析
HTML code……
[/Quote]
恩，我不是问两种方法的区别，而是问解析顺序，会不会发生冲突，优先级谁高？
WebAdvocate 2010-07-26
- 打赏
- 举报
应该是先加载 style2 后加载style1
优先级的话，lz可以看看这两个帖子：
【分享】说说标准 —— 层叠顺序(Cascading order)
【分享】说说标准——关于样式的特殊性
优先级的话，lz可以看看这两个帖子：
【分享】说说标准 —— 层叠顺序(Cascading order)
【分享】说说标准——关于样式的特殊性
籽沫 2010-07-26
- 打赏
- 举报
汗……
哎 楼主应该问的不是他们的差异吧！
在css中优先级是按照的纠结远程，但是在html中，一般解析的时候是从上到下的，也就是它会先解析：
然后在接着解析
那这样的话想对于这2个样式表的话，style2里面的样式将会覆盖style1中的样式，也就是说你页面中的样式会采用style2的样式，楼主可以测试下
哎 楼主应该问的不是他们的差异吧！
在css中优先级是按照的纠结远程，但是在html中，一般解析的时候是从上到下的，也就是它会先解析：
<style type="text/css">@import url(http://www.zhui1.com/style1.css);</style>
然后在接着解析
<link href="http://www.zhui1.com/style2.css" rel="stylesheet" type="text/css" />
那这样的话想对于这2个样式表的话，style2里面的样式将会覆盖style1中的样式，也就是说你页面中的样式会采用style2的样式，楼主可以测试下
ahjd110 2010-07-26
- 打赏
- 举报
[Quote=引用 2 楼 zy0412326 的回复:]
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），li……
[/Quote]
正解/...tk
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），li……
[/Quote]
正解/...tk
亚丁号 2010-07-26
- 打赏
- 举报
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
亚丁号 2010-07-26
- 打赏
- 举报
MARK 个人觉得是一样的 他们都属于外嵌样式
