仅使用 css 过滤项目答案

【问题标题】：Filter items with css only仅使用 css 过滤项目
【发布时间】：2015-03-24 00:40:51
【问题描述】：

我想仅使用 css 过滤项目列表。单击特定链接时，列表应过滤项目。

HTML：

<!-- Header links -->
<a href="#" class="all" tabindex="-1" title="All" >All</a> 
<a href="#" class="web" tabindex="-1" title="Web">Web</a> 
<a href="#" class="graphic" tabindex="-1" title="Graphic">Graphic</a> 
<a href="#" class="music" tabindex="-1" title="Music">Music</a>

<!-- Content -->
<li class="web"><a href="#">Web</a></li>
<li class="music"><a href="#">Music</a></li>
<li class="graphic"><a href="#">Graphic</a></li>
<li class="web"><a href="#">Web</a></li>
<li class="music"><a href="#">Music</a></li>
<li class="graphic"><a href="#">Graphic</a></li
<li class="music"><a href="#">Music</a></li>
<li class="graphic"><a href="#">Graphic</a></li>

CSS

a[class="web"]:focus ~ li:not([class="web"]) {
    height:0px;
    width:0px;
    border:none;
    margin:0;
    display:none;
}
a[class="graphic"]:focus ~ li:not([class="graphic"]) {
    height:0px;
    width:0px;
    border:none;
    margin:0;
    display:none;
}
a[class="music"]:focus ~ li:not([class="music"]) {
    height:0px;
    width:0px;
    border:none;
    margin:0;
    display:none;
}

我想在标题链接周围放置一个div。但是这个包装div 破坏了功能。我怎样才能做到这一点？

这是JSFiddle Demo

【问题讨论】：

你为什么有tabindex: "-1"？
您应该在问题中包含您的 CSS；您实现过滤功能的（聪明！）方式 - 通过:focus 伪选择器和兄弟选择器 - 目前不遵循 JSFiddle 链接是不明显的。如果您将<a>s 包装在<div> 中，我认为您今天不可能实现您想要的功能，因为我认为没有任何方法可以编写针对<li> 的CSS一个专注的<a> 作为一个侄子。如果浏览器曾经实现过parent selector，情况会有所不同。

标签： html css select filter tabindex

【解决方案1】：

div 可以在 a 标记周围，但您还需要在同一容器中包含 li 项。原因是 CSS 中还没有可用的父选择器。

为什么要在 a 标头周围放置一个 div？

如果这是因为它们的样式，为什么不为标题链接指定您想要的 a 类，然后添加 CSS：

a.all, a.web, a.graphic, a.music {
  // Your heading css
}

这是一个例子： http://codepen.io/anon/pen/xbPYNX

【讨论】：

是否可以在标签周围添加块 div？