Html CSS同级选择器~用于非公共父div

我在上一节课上看到了这个教程，并决定玩一会儿。你有单选按钮，当你选择一个，比如说，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>

现在让我们假设我尝试将所有input type=“radio”标记放在它们自己的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选择器type all:checked~.ff items li

，以便它可以引用父div的父级（因为“ff选择器type xx”和“ff items”将不再具有相同的父级）

可以找到完整的代码和原始教程

<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....)