css - 选择不是 :target selector? 的元素

Question

我正在尝试使用一种 XML、一种 XSLT 和一种 CSS 制作一个简单的博客风格的网站。为此，我希望可以选择仅查看 xml 中的一个条目，并且我希望在没有 javascript 或 php 的情况下执行此操作。我正在尝试使用 :target 选择器来执行此操作。

我想要实现的行为是；

• index.html 应该显示所有内容
• index.html#one 应该只显示 id="one"的条目
• index.html#two 应该只显示 id="two"的条目

等等。

我找到了可以显示最后一个同级的解决方案，但不合适。我的 xslt 将条目转换为表格，但我看不出如何动态解析 xml 以适应该解决方案。

有没有办法用 css 做到这一点，还是我应该开始学习 php？

Answer 1

这应该是一个非此即彼的命题……学习 PHP。它会让你受益。

但对于纯 CSS 解决方案(带有一点 .htaccess 魔法)，您可以将 index.html 重写为 index.html#all，将您的包装 div 设置为具有所有 ID(或您的包装器 ID 是什么) )，然后为#all 设置 :target CSS 以显示所有内容。

#all .YouWantToHide {
    display:none;
}

#all:target .YouWantToHide, #one:target, #two:target {
    display:block;
}

默认情况下，这将在普通页面上隐藏所有内容(永远不会访问，它只是为特定元素设置基调以显示其他元素稍后隐藏)，显示在 #all 目标上(现在是默认设置)页面)，特定元素将根据需要显示，而其他元素将隐藏。