如何使css规则仅在页面上有某个div id时适用

Posted 2023-03-06

【中文标题】如何使css规则仅在页面上有某个div id时适用

【英文标题】：how to make a css rule only apply when a certain div id is on the page

【发布时间】：2021-11-16 09:44:02

【问题描述】：

仅当页面上存在某个 div 时，我如何有条件地应用 @media print css 规则集。

我有以下 css 在打印 #mytargetdiv 时有帮助：

@media print 
    .inside-article > :not(#mytargetdiv), .inside-navigation, .site-footer 
        display: none;
    

它工作得很好，除了一些页面有#mytargetdiv 并且一些不包含具有该 id 的 div。如果给定页面上不存在 ID 为 #mytargetdiv 的 div，那么我不想应用此 @media print 规则。

如何在不包含 #mytargetdiv 的页面上排除此 @media print css 规则。

【问题讨论】：

嗨，该规则是否适用于目标 div 的后代/兄弟姐妹？这可能很有趣***.com/questions/29037763/css-equivalent-of-has/…

您必须使用 javascript 检测到这一点，然后可能会在正文中添加一个类来表示这一点。你不能单独使用 css 来做到这一点

【参考方案1】：

您可以使用 Javascript 检查 id 是否存在，如果找到则添加样式。

if (document.getElementById('mytargetdiv') != null) 
    var style = document.createElement('style');
    style.innerhtml = '@media print  .inside-article > :not(#mytargetdiv), .inside-navigation, .site-footer  display: none;  ';
    document.body.appendChild(style);

【讨论】：

有趣。太糟糕了 .css 单独无法处理这个问题。使用您使用 javascript 显示的逻辑，我想在我的 php 代码中，我可以有条件地仅在需要它的页面上插入样式标记（即我知道将包含 #mytargetdiv 的那些）。

我能够通过仅在我知道包含#mytargetdiv 的页面上通过 php 有条件地插入@media 打印样式规则来使其工作。