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。

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

选择没有Javascript的分类项目

1 个答案: