文章/答案/技术大牛

发布

社区首页 >问答首页 >如何根据页面上的特定HTML类调用特定的CSS文件？

问如何根据页面上的特定HTML类调用特定的CSS文件？
EN

Stack Overflow用户

提问于 2015-06-08 20:20:15

回答 3查看 818关注 0票数 2

例如，我的站点有5个CSS文件，像这样.

  <link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />

该网站的每一页都将属于其中一个“类别”(即营销、全球定位系统、舰队、服务或公司)。这是由HTML标记上的一个类表示的。所以在每一页的顶部都是这样的.

<html class="gps">

目前，我有每个页面调用上面列出的所有5个样式表，但是它只需要相应的样式表，所以如果可能的话，我想提高效率。

有没有办法使用PHP (或任何有意义的东西)从本质上搜索标签的类中的"gps“或”舰队“(等等)。例如，如果它找到了“全球定位系统”，我就只能回覆那个样式表，即.

echo "<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />";

php

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-06-08 20:30:26

这似乎是一个糟糕的策略，尽管我不知道您的CSS文件和其他参数的大小。

就其风格而言，这些页面有多大的不同？从上面的文件名来看，您可能在每个文件中都有很多冗余的(重复的) CSS选择器。这些文件中有多少CSS实际上是唯一的？是5k? 10k还是50k？如果它相当小，就把它放在一个文件中。通过将它放在一个文件中，站点所有页面的所有CSS都将被缓存在用户的浏览器中，以后的页面不需要额外的请求。

如果将所有文件组合在一起，并且您有一个500 K的文件，而250 k是单个页面的话，那么拆分它就更有意义了。

- PHP解决方案

我猜您使用PHP在<html>标记上设置了CSS类。如果是，为什么不在PHP脚本中检查该变量的值并添加适当的CSS文件。

就像这样：

<html class="<?php echo $page_class; ?>">
<head>
    <link href="custom_<?php echo $page_class; ?>.css">
</head>

这是一个相当笼统的建议，但希望它能为你指明正确的方向。

票数 2

Stack Overflow用户

发布于 2015-06-08 20:30:18

这完全取决于PHP如何生成HTML。另一种可能是使用JavaScript来实现这一点。你可以这样做：

<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';

var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';

document.getElementsByTagName('head')[0].appendChild(link);
</script>

例如，您可以将上面的代码放在<head>和</head>之间。对于您的问题(PHP解决方案)并不是一个有效的答案，但您可以将此作为一种替代方案。

票数 3

Stack Overflow用户

发布于 2015-06-08 20:32:17

try something like

     <?php
     if($page_type = 'gps')
     {
     ?>
     <link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
     <?php
     }
     elseif($page_type = 'marketing')
     {
     ?>
     <link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
     <?php
     }
      ?>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30718347

复制

相似问题

问如何根据页面上的特定HTML类调用特定的CSS文件？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据页面上的特定HTML类调用特定的CSS文件？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据页面上的特定HTML类调用特定的CSS文件？
EN