[已解决]<link>的主样式为什么必须发在其他条件样式的前面？

moc

发现一个问题，百度也没查到到(可能没仔细查)，为甚么下面我的print下的样式和屏宽512-1024会被主样式覆盖，就因为顺序的问题？
和小甲鱼的只有下面的顺序有变化。。。

        <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css">
        <link rel="stylesheet" type="text/css" media="print" href="print.css">
        <link rel="stylesheet" type="text/css" href="style.css">        
        <link rel="icon" type="image/x-icon" href="./img/favicon.ico">

最佳答案

月排行榜 / 总排行榜

不二如是

2018-5-1 15:01:44

1、浏览器会按照“从上到下”的顺序加载标签（DOM）。

2、所以会按照顺序设置<link>

<!--设置512到1024间的屏幕时页面的样式-->
    <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css">
    <!--设置页面打印设置时的样式-->
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    <!--默认页面样式-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--加载网站icon-->
    <link rel="icon" type="image/x-icon" href="./img/favicon.ico">

3、由于这四种样式不存在相互间的重叠样式设置，所以不存在谁覆盖谁的问题。（前提link加载的样式没有私自改动）

4、如果私自改动，会按照加载顺序，加载相同样式的最后一个设置，例如在512——1024分辨率时，设置字体大小为16px，而全局style为33px，由于加载顺序，最终看到字体大小就是33px

跳转到最佳答案楼层

alltolove

嗯，应该是最后的覆盖前面的

moc

alltolove 发表于 2018-4-29 20:00
嗯，应该是最后的覆盖前面的

又不是表达一个意思，也能覆盖？

不二如是

1、浏览器会按照“从上到下”的顺序加载标签（DOM）。

2、所以会按照顺序设置<link>

<!--设置512到1024间的屏幕时页面的样式-->
    <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css">
    <!--设置页面打印设置时的样式-->
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    <!--默认页面样式-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--加载网站icon-->
    <link rel="icon" type="image/x-icon" href="./img/favicon.ico">

3、由于这四种样式不存在相互间的重叠样式设置，所以不存在谁覆盖谁的问题。（前提link加载的样式没有私自改动）

4、如果私自改动，会按照加载顺序，加载相同样式的最后一个设置，例如在512——1024分辨率时，设置字体大小为16px，而全局style为33px，由于加载顺序，最终看到字体大小就是33px

moc

不二如是 发表于 2018-5-1 15:01
1、浏览器会按照“从上到下”的顺序加载标签（DOM）。

2、所以会按照顺序设置

谢谢你的回答，不明白什么叫私自改动，是添加了rel等于stylesheet时其他的media值吗？全局样式包含其他样式，浏览器在加载时加载满足条件的最后一个样式，这样理解应该就可以吧。

不二如是

moc 发表于 2018-5-2 11:22
谢谢你的回答，不明白什么叫私自改动，是添加了rel等于stylesheet时其他的media值吗？全局样式包含其他样 ...

私自改动就是自己修改link中的加载外部.css文件

如果和甲鱼老师代码一样，那么忽略这一点

moc

不二如是 发表于 2018-5-2 11:38
私自改动就是自己修改link中的加载外部.css文件

如果和甲鱼老师代码一样，那么忽略这一点

我确实是修改啦，大概明白啦，谢谢啦。