moc 发表于 2018-4-29 19:19:48

<link>的主样式为什么必须发在其他条件样式的前面?

发现一个问题,百度也没查到到(可能没仔细查),为甚么下面我的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">

alltolove 发表于 2018-4-29 20:00:16

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

moc 发表于 2018-4-29 20:05:07

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

又不是表达一个意思,也能覆盖?

不二如是 发表于 2018-5-1 15:01:44

本帖最后由 不二如是 于 2018-5-1 15:05 编辑

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-2 11:22:10

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

2、所以会按照顺序设置


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

不二如是 发表于 2018-5-2 11:38:18

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


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

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

moc 发表于 2018-5-2 12:53:42

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

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

我确实是修改啦,大概明白啦,谢谢啦。
页: [1]
查看完整版本: <link>的主样式为什么必须发在其他条件样式的前面?