Question

我想仅使用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

Answer 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

仅使用css过滤项目

1 个答案: