html - 显示带有下拉菜单的图像(在表格中)(无 javascript)

Question

对于一个元素，我们必须制作一个页面，用户可以在其中自定义产品。我想通过一个下拉菜单来实现这一点，用户可以在其中选择他们的汽车颜色。如果不能使用 div 和 javascript，这已被证明是相当困难的。目标是在下拉菜单中选择颜色时显示隐藏的表格单元格。我一直在尝试通过“option:checked”和“option:active”来做到这一点，但它只显示了表格中的所有图像。在此先感谢您的查看 :)!

     .kleur1,.kleur2,.kleur3,.kleur4,.kleur5{
            display: none;
        }
        #kleur1.kleurfilter:checked ~ table,tr,td.kleur1,
        #kleur2.kleurfilter:checked ~table,tr,td.kleur2,
        #kleur3.kleurfilter:checked ~ table,tr,td.kleur3,
        #kleur4.kleurfilter:checked ~ table,tr,td.kleur4,
        #kleur5.kleurfilter:checked ~ table,tr,td.kleur5{
            display: table-cell;
        }

   <main>
    <table>
        <tr class="kleurPerson">
            <td class="kleur1"><img src="../media/customize/rsz_black.jpg" alt="Zwarte mercedes amg gt4"></td>
            <td class="kleur2"><img src="../media/customize/rsz_blue.jpg" alt="Blauwe mercedes amg gt4"></td>
            <td class="kleur3"><img src="../media/customize/rsz_red.jpg" alt="Rode mercedes amg gt4"></td>
            <td class="kleur4"><img src="../media/customize/rsz_white.jpg" alt="Witte mercedes amg gt4"></td>
            <td class="kleur5"><img src="../media/customize/rsz-silver.jpg" alt="Silvere mercedes amg gt4"></td>
        </tr>
    </table>
    <select name="kleur" id="kleur">
        <option class="kleurfilter" id="kleur1" value="Midnight black">Midnight Black</option>
        <option class="kleurfilter" id="kleur2" value="Sky blue">Sky blue</option>
        <option class="kleurfilter" id="kleur3" value="Matte Red">Matte red</option>
        <option class="kleurfilter" id="kleur4" value="Slick white">Slick white</option>
        <option class="kleurfilter" id="kleur5" value="Silver">Silver</option>
    </select>
    <label for="kleur">Mercedes</label>

</main>



    
        

Answer 1

根据您的结构，您不能通过纯 CSS 和 HTML 来完成，因为 CSS 没有父选择器或向后选择器。我修改了 HTML 并使用单选按钮在 this fiddle 中实现了同样的效果。

我使用了+直接兄弟选择器