只有 css 的最后一个链接生效-解网

问：

我有这三个CSS链接，用于三种不同大小的设备。

<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth959.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth768.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth600.css" rel='stylesheet'>

以及面向所有人的媒体查询：

最大宽度959.css

 @media only screen and (max-width: 959px)
 {
   // styles here
 }

最大宽度768.css

@media only screen and (max-width: 768px)
{
  // styles here
}

最大宽度600.css

@media only screen and (max-width: 600px)
{
    // styles here
}

但是只有最后一个链接的 css（maxwidth600.css） CSS 正在生效，其他人正在覆盖？

PHP HTML CSS

<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/maxwidth959.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/maxwidth768.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/maxwidth600.css" rel='stylesheet'>

0赞 AwatITWork 4/7/2017 #2

如果我没记错的话，你想尝试创建一个动态或响应式页面，这样你就可以尝试像我这样的非常简单的解决方案。

1-创建CSS文件并放置所有样式，即“MyStyle.css”并将所有媒体查询放入其中。

2-将您的页面与您的CSS文件链接，我正在使用外部链接。

看看这个并试试这个：

“MyStyle.css”

@media only screen and (max-width: 959px){.ch{ color: red;}}
@media only screen and (max-width: 768px){.ch{color: blue;}}
@media only screen and (max-width: 600px){.ch{color: green;}}

“索引。PHP”

<!DOCTYPE html>
<html>
    <head>
        <title>Your title</title>
        <link href="./css/mytyle.css" rel="stylesheet">
    </head>
<body>
    <h1 class="ch">Use simple solutions.</h1>

    <?php
        $string = "Object Oriented Programming in PHP";
        echo "<h1 class='ch'>" . $string . "</h1>"; 
    ?>
</body>
</html>

希望我能帮到你，如果我有任何语法或拼写错误，我很抱歉。

11赞 Obsidian Age 4/7/2017 #3

假设所有三个 CSS 链接确实都指向正确的位置并正确加载文件，您的代码本身没有任何问题。

通过您只看到从最终（最小的）媒体查询中应用的样式，我假设您的媒体查询在具有相同特定级别的选择器中都包含相同的属性。重要的是要认识到，特异性的一个不可或缺的方面是，在“平局”的情况下，DOM 拥有最终决定权。DOM（和渲染的 CSS）是从上到下读取的。

当您以较小的宽度查看网站时（属于多个媒体查询），媒体查询将按顺序执行。下面是一个示例：

@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}

<div id="media">Change me!</div>

请注意，从第一个媒体查询应用，但被第二个媒体查询覆盖。text-decorationfont-size

我们可以通过更改媒体查询的顺序来修改此行为：

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}
@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

<div id="media">Change me!</div>

请注意，现在如何从第二个媒体查询中应用 and。从最小的媒体查询开始可以帮助确保网站在移动设备上看起来很棒，这被称为移动优先开发。font-sizetext-decoration

因为在 HTML 中，这三个 CSS 文件按的顺序，，包含，所以它们以相同的顺序呈现。因此，中指定的规则将比和中指定的规则具有更高的特异性级别。959768600maxwidth600.cssmaxwidth768.cssmaxwidth959.css

根据要在哪些断点应用的样式，有三个选项：

通过在其他媒体查询中同时指定 a 和 a，从移动视图中排除其他媒体查询min-widthmax-width
通过赋予它们更高的特异性来显示“更广泛”媒体查询中的一些规则
切换到移动优先开发

希望这有帮助！:)

0赞 Ndroid21 4/11/2017 #4

我认为，由于您的代码是从上到下读取的，并且 maxwidth600.css 位于其他两个文件下方，因此它仅从此文件中获取样式，因为无法检查要读取哪个文件（从 3 个媒体查询文件）在浏览器的当前大小上。您可以尝试做的是将所有查询放在同一个文件中，或者找到某种方法仅根据浏览器的宽度链接文件。

0赞 delboy1978uk 4/12/2017 #5

首先，检查加载的每个CSS文件。如果在 Firefox 中，右键单击，检查元素，然后单击网络选项卡和 CSS 选项卡。刷新页面。这三个文件都加载正常吗？如果是这样，他们将有一个 HTTP 200 响应。

接下来，这些媒体查询适用于不同大小的浏览器窗口，并且一次只有一个窗口生效。因此，将窗口拖动< 600 像素，然后将其放大< 768 像素，最后拖动到 959 像素的宽度。如果你做对了，当你拖动窗口时，不同的CSS规则就会启动。

希望这有帮助！

上一个：如何从网站上阅读？C# [重复]

下一个：如何在 rpy2 中使用 python 中的变量？

只有 css 的最后一个链接生效

Only last link of css is taking effect

评论

看看这个并试试这个：