css 根据页面更改 - 不是不同的文件答案

【问题标题】：css changes according to page - not different filescss 根据页面更改 - 不是不同的文件
【发布时间】：2013-12-04 21:53:39
【问题描述】：

有没有办法根据用户点击的页面来改变 CSS 样式？而不是每次都加载不同的 CSS 文件，这样做？

我有一个网络地图站点，所以在小型设备中我想为标题做display : none，所以地图的 div 会显得更大。我将为此使用媒体查询，但标题也会在所有其他页面中发生变化。我希望它仅在地图页面中更改。

我该怎么做？如果有一种方法可以让您不必加载不同的 CSS 文件，那就太好了。是吗？

提前致谢。

编辑

我的文件结构是这样的

<?php
 error_reporting(E_ALL);

 include_once('header.php');

//rest of the code of the file starts here....

其中header.php 包含标题、菜单栏、元数据。

所以我不能只给标题一个 id，因为它仍然是所有页面可见的相同 id

再次感谢

【问题讨论】：

拥有页面特定样式的一种常见方法是为body 或html 元素在每个页面上赋予一个唯一的ID——然后只需在CSS 选择器中使用该ID 来定义不同的样式不同的页面。
@CBroe 感谢您的分析。有趣，但是，我认为这对我没有帮助。我忘了提及我的文件结构。我编辑了问题。
当然你可以做到这一点——只需在包含之前设置一个变量并依赖于回显body的id。
@CBroe 对迟到的回答感到抱歉。我不确定我明白你的意思。能举个例子吗？
pageId='foo'; include 'header.php'; - 然后在该脚本中，您只需将变量的内容输出为body 元素的 id 属性值……

标签： css responsive-design media-queries

【解决方案1】：

如果您的页面是静态页面并且您只需要进行一项更改，只需使用display:none; 创建一个class 并将其应用于页眉，而不会影响任何其他页面或页面元素。

这样，您的标题也被隐藏了，您的目的也得到了解决。

其他方法是将id 添加到您的<body> 并使用父子CSS 选择器，随后隐藏这些页面的标题。

希望这会有所帮助。

【讨论】：

感谢分析器。有趣，但是，我认为这对我没有帮助。我忘了提及我的文件结构。我编辑了问题。

【解决方案2】：

您可以通过 JavaScript 检查您的 URL 并为特定元素添加样式

例子

 if (window.location.href.toString().toLowerCase().indexOf("map") != -1) { // If url contains maps
            document.getElementById("p2").style.display="none";
        }

【讨论】：

有趣。谢谢。会检查并通知您。