仅使用 CSS 有条件地隐藏 div？

【问题标题】：Hide div conditionally with only CSS?仅使用 CSS 有条件地隐藏 div？
【发布时间】：2013-03-14 11:54:16
【问题描述】：

我目前使用 Javascript 来隐藏我的 Tumblr 网站主页上的社交媒体按钮。它被编程为仅根据浏览器中的 url 在主页上隐藏它们，而不是在任何其他页面上。

但是，我很好奇是否有办法只使用 CSS（甚至 CSS3）来做到这一点，类似于媒体屏幕如何根据浏览器大小为 div 设置条件。我知道 PHP 可以有更多条件，但 Tumblr 不允许。

【问题讨论】：

【解决方案1】：

根据浏览器大小可以隐藏，例如

@media (min-width: 768px) and (max-width: 979px) {
  .hidden {
    display:none;
  }
}

或

取决于父类

 <body class="wrapper">

 .wrapper .hidden{display:none;}

【讨论】：

【解决方案2】：

您应该使用{block:PermalinkPage} 和{block:IndexPage}。

{block:PermalinkPage}
<div class="icons">
    <p>This will only appear on permalink pages.</p>
</div>
{block:PermalinkPage}

如果您只希望它出现在帖子而不是页面上，您可以通过将其包装在 {block:Date} 中更进一步。

【讨论】：