我在CSS Filter Functionality上看到了这个教程，并决定玩一会儿。您有单选按钮，当您选择一个，例如，收音机A时，将显示属于收音机A指定类别的所有项目，并且将隐藏任何不适合该类别的内容。
单选按钮和相关元素可在此代码下找到：
<section class="ff-container">
<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
<label for="select-type-all" class="ff-label-type-all">All</label>
<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
<label for="select-type-1" class="ff-label-type-1">Web Design</label>
<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
<label for="select-type-2" class="ff-label-type-2">Illustration</label>
<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
<label for="select-type-3" class="ff-label-type-3">Icon Design</label>
<div class="clr"></div>
<ul class="ff-items">
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/366400-Chameleon">
<span>Chameleon</span>
<img src="images/1.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
<span>Tutorials (wip)</span>
<img src="images/2.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/372566-Flower">
<span>Flower</span>
<img src="images/3.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/138484-Symplas-website">
<span>Symplas website</span>
<img src="images/4.jpg" />
</a>
</li>
<li class="ff-item-type-3">
<a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-">
<span>TRON: Mobile version</span>
<img src="images/5.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://dribbble.com/shots/347197-Cake">
<span>Cake</span>
<img src="images/6.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/186199-Tailoring-accessories">
<span>Tailoring accessories</span>
<img src="images/7.jpg" />
</a>
</li>
<li class="ff-item-type-3">
<a href="http://dribbble.com/shots/133859-App-icon">
<span>App icon</span>
<img src="images/8.jpg" />
</a>
</li>
<li class="ff-item-type-1">
<a href="http://dribbble.com/shots/188524-Event-Planning">
<span>Event Planning</span>
<img src="images/9.jpg" />
</a>
</li>
</ul>
</section>
功能背后的主要CSS是
.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
width: 188px;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: -webkit-transform 0.3s linear;
-o-transition: -o-transform 0.3s linear;
-ms-transition: -ms-transform 0.3s linear;
transition: transform 0.3s linear;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3
{
-webkit-transition: -webkit-transform 0.3s linear, width 0s linear 0.3s;
-moz-transition: -moz-transform 0.3s linear, width 0s linear 0.3s;
-o-transition: -o-transform 0.3s linear, width 0s linear 0.3s;
-ms-transition: -ms-transform 0.3s linear, width 0s linear 0.3s;
transition: transform 0.3s linear, width 0s linear 0.3s;
-webkit-animation: scaleUp 0.3s linear 0.4s forwards;
-moz-animation: scaleUp 0.3s linear 0.4s forwards;
-o-animation: scaleUp 0.3s linear 0.4s forwards;
-ms-animation: scaleUp 0.3s linear 0.4s forwards;
animation: scaleUp 0.3s linear 0.4s forwards;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3)
{
-webkit-animation: scaleDown 0.3s linear forwards;
-moz-animation: scaleDown 0.3s linear forwards;
-o-animation: scaleDown 0.3s linear forwards;
-ms-animation: scaleDown 0.3s linear forwards;
animation: scaleDown 0.3s linear forwards;
}
现在让我说我尝试将所有输入类型=＆＃34; radio＆＃34;标签在他们自己的div中像：
<section class="ff-container">
<div class="new-div">
<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
<label for="select-type-all" class="ff-label-type-all">All</label>
<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
<label for="select-type-1" class="ff-label-type-1">Web Design</label>
<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
<label for="select-type-2" class="ff-label-type-2">Illustration</label>
<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
<label for="select-type-3" class="ff-label-type-3">Icon Design</label>
</div>
<div class="clr"></div>
<ul class="ff-items">
<li class="ff-item-type-2"> (truncated....)
如何修改CSS选择器：.ff-container input.ff-selector-type-all:checked ~ .ff-items li以便它可以引用父div的父级（因为＆＃34; ff-selector-type-xx＆＃34;和＆＃34 ; ff-items＆＃34;将不再拥有相同的父母）？
整个代码＆amp;可以找到原始教程here