html - 选择没有 Javascript 的分类元素

Question

我想创建一个页面，其中根据用户选择设置分类元素的显示状态。理想情况下，我希望这是基于章节/哈希 (:target) 的，但也适合复选框驾驶状态。

作为练习，我试图避免为此目的使用 Javascript。这似乎不可能，但是，我很乐意被证明是错误的。

澄清一下:此特定用例涉及页面上的元素集合，每个元素可能属于一个或多个类别。用户将选择一个类别，然后所有匹配该类别的元素的 display 状态将设置为 block。当元素的其中一个类别未被选中时，它将被隐藏(display: none)。例如，假设您可以使用 :target 选择一个类而不是 ID，它可能看起来像这样:

<a href="#category1>Category 1</a>
<a href="#category2>Category 2</a>
<a href="#category3>Category 3</a>

<span class="category1 category2">Item 1</span>
<span class="category2 category3">Item 2</span>
<span class="category3">Item 3</span>

和 CSS:

span {
    display: none;
}
:target {
    display: block;
}

(这在 Javascript 中很容易做到，因此无需指出这一点。)

Answer 1

您不能使用 <a>因为我们没有用于(取消)单击元素的 css 选择器。但是对于复选框，我们有 :checked

<input type="checkbox" value="1" id="cat1" name="category">Category 1</label>
<input type="checkbox" value="2" id="cat2" name="category">Category 2</label>
<input type="checkbox" value="3" id="cat3" name="category">Category 3</label>

<span class="category1 category2">Item 1</span>
<span class="category2 category3">Item 2</span>
<span class="category3">Item 3</span>

和CSS

#cat1:checked ~ span.category1 { display:block!important; }
#cat2:checked ~ span.category2 { display:block!important; }
#cat3:checked ~ span.category3 { display:block!important; }

span { display:none; }

现场观看:http://jsfiddle.net/FV2Eq/7/

~的一点解释

这个同级组合器类似于 X + Y，但是没有那么严格。虽然相邻选择器 (ul + p) 只会选择前一个选择器之前的第一个元素，但这个选择器更通用。引用上面的示例，它将选择任何 p 元素，只要它们跟在 ul 之后。

因此，这意味着您必须将它们保存在同一个容器中，就像示例中那样。