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

【问题标题】：Only last link of css is taking effect只有css的最后一个链接生效
【发布时间】：2017-08-23 18:19:37
【问题描述】：

我为三种不同尺寸的设备提供了这三个 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'>

所有媒体查询：

maxwidth959.css

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

maxwidth768.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 生效，其他人覆盖？

【问题讨论】：

您的代码没有问题。您是否收到任何错误，例如未加载样式表？
@micky 请添加一个 url 或代码并告诉我们什么不起作用，如果无法测试您的代码并重新生成问题，就不可能提供一个好的答案..
请告诉我这是否解决了您的问题：stackoverflow.com/questions/8790321/…
@Casper echo is not actually a function (it is a language construct), so you are not required to use parentheses with it. php.net/manual/en/function.echo.php
您是对的，我什至看到您在传递多个参数时甚至都不允许。谢谢你的纠正。我学到了一些新东西:) @fubar

标签： php html css

【解决方案1】：

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

由于您只看到从最终（最小）媒体查询应用的样式，我假设您的媒体查询在 selectors 内都包含相同的 properties，它们具有相同级别的specificity。重要的是要认识到特异性的一个不可或缺的方面是，在“平局”的情况下，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;
  }
}

&lt;div id="media"&gt;Change me!&lt;/div&gt;

请注意，text-decoration 是从 第一个 媒体查询应用的，但 font-size 会被 第二个 媒体查询覆盖。

我们可以通过改变媒体查询的顺序来修改这种行为：

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

&lt;div id="media"&gt;Change me!&lt;/div&gt;

注意现在是如何两者从第二个媒体查询中应用font-size 和text-decoration。从最小的媒体查询开始有助于确保网站在手机上看起来很棒，被称为mobile-first development。

因为您在 HTML 中以 959、768、600 的顺序包含三个 CSS 文件，所以它们以相同的顺序呈现。因此，maxwidth600.css 中指定的规则将比maxwidth768.css 和maxwidth959.css 中指定的规则具有更高级别的特异性。

根据您希望在哪些断点应用哪些样式，您有以下三种选择：

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

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

试试这个：

<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'>

【讨论】：

【解决方案3】：

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

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>

希望对您有所帮助，如果我有任何语法或拼写错误，我深表歉意。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

接下来，这些媒体查询针对不同大小的浏览器窗口，一次只会生效一个。因此，拖动您的窗口

希望这会有所帮助！

【讨论】：