带有 $ 的单个页面样式 [关闭]答案

【问题标题】：Individual page styling with $ [closed]带有 $ 的单个页面样式 [关闭]
【发布时间】：2013-03-05 14:02:43
【问题描述】：

我有一个带有www.something.com/home 的页面（背景是红色的，因为我使用了这种样式）

body.menu-home .main-bg {
background: red ; }

但是当人们去例如 www.something.com/home/photos 时，样式也是红色的，因为它遵循 /home 的样式。我怎样才能改变这个？我只希望红色背景只在 /home 上。

我试过这样做

body.menu-home$ .main-bg {
background: red ; }

但它没有用，有什么建议吗？我正在使用 joomla 顺便说一句

提前谢谢你

【问题讨论】：

我不相信你可以使用$ 标志来设置css样式，你应该根据访问的分页向body添加一个类，即：body.home或body.photos等
您在这里绝对混淆了很多东西...... css 样式不适用于不同的页面。 URL 和 dom-tree 也没有任何关联。此外，目前任何浏览器都不支持主题运算符。它在 CSS 选择器级别 4 中使用! atm 指定，但这与您的问题无关。
@Cristoph 好吧，因为 OP 很可能有一个外部样式表，当然样式适用于不同的页面。但是仍然可以添加一个类。或者对特定页面使用内联样式。
@jtheman 这只是您做出的假设；）您没有任何证据证明这一点。也许它是在每个子页面中重新出现的内联样式？如果不知道结构，您可能无法分辨。还有一个 css 文件不会让它神奇地出现在 html 页面上。顺便说一句。我是克里斯托夫。
@Cristoph 是的，这是一个假设（我写了“最可能”），但是当 OP 在其他页面上得到结果（红色背景）时，为什么你的评论（“css 样式不适用于不同的pages") 是否有效？同样根据 Joomla 的一点经验，外部 CSS 是“最有可能的”

标签： html css joomla styles

【解决方案1】：

你总是可以在你的模板 index.php 文件中添加这样的东西：

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault()) {
        $css = 'body.menu-home .main-bg {'
              .'background: red;'
              .'}';
        $doc->addStyleDeclaration($css);
}

它检测到您的网站位于默认菜单项上，我假设它是您的主页，如果是，请添加该 CSS 代码。

注意：如果$doc = JFactory::getDocument();已经被定义，请从上面的代码中删除

希望这会有所帮助。

【讨论】：

+1 缺少 $css = 但是？
@Christoph - 感谢您指出这一点 :) 我需要为自己再煮一杯咖啡：/