css - 仅使用 CSS 创建选项卡，但一些输入隐藏在两个 div 下

Question

我才刚刚开始学习 CSS。我的代码基本上是一个 div 下的 div 列表，以及第二个 div 下的第二个 div 列表。这是很多复制粘贴。看:

        <div id="button_container">
        <!--Try and get this to be generated by PHP-->
            <div class="button"><input id="table1"type="radio" name="table_selector" checked="checked"> <label for="table1">1</label></div>
            <div class="button"><input id="table2"type="radio" name="table_selector"> <label for="table2">2</label></div>
            <div class="button"><input id="table3"type="radio" name="table_selector"> <label for="table3">3</label></div>
            <div class="button"><input id="table4"type="radio" name="table_selector"> <label for="table4">4</label></div>
            <div class="button"><input id="table5"type="radio" name="table_selector"> <label for="table5">5</label></div>
            <div class="button"><input id="table6"type="radio" name="table_selector"> <label for="table6">6</label></div>
            <div class="button"><input id="table7"type="radio" name="table_selector"> <label for="table7">7</label></div>
            <div class="button"><input id="table8"type="radio" name="table_selector"> <label for="table8">8</label></div>
            <div class="button"><input id="table9"type="radio" name="table_selector"> <label for="table9">9</label></div>
            <div class="button"><input id="table10"type="radio" name="table_selector"> <label for="table10">10</label></div>
            <div class="button"><input id="table11"type="radio" name="table_selector"> <label for="table11">11</label></div>
            <div class="button"><input id="table12"type="radio" name="table_selector"> <label for="table12">12</label></div>
        </div>
        <div id="search_container" class="content">
            <!--Contents should be generated by PHP-->
            <div id="table1_content">CONTENT1</div>
            <div id="table2_content">CONTENT2</div>
            <div id="table3_content">CONTENT3</div>
            <div id="table4_content">CONTENT4</div>
            <div id="table5_content">CONTENT5</div>
            <div id="table6_content">CONTENT6</div>
            <div id="table7_content">CONTENT7</div>
            <div id="table8_content">CONTENT8</div>
            <div id="table9_content">CONTENT9</div>
            <div id="table10_content">CONTENT10</div>
            <div id="table11_content">CONTENT11</div>
            <div id="table12_content">CONTENT12</div>
        </div>

我想要的是选择内容(即那些带有 table#_content id 的内容)，当且仅当选中相应的单选按钮输入(带有 id table#)时。

不幸的是，按照我编写代码的方式，单选按钮被埋在两个 div 下(第一个属于“button”类，第二个属于 id “button-container”)，然后是下一个的兄弟div(类“content”)，它只包含我想要访问的内容。

由于 CSS 中没有父级选择器，我一直试图搞砸它，看看是否可以实现，但看起来不可能。

有什么方法可以使用一些 CSS 技巧来访问它吗？我宁愿不删除 div，因为我经常使用它们来使我的布局看起来像某种方式。

最终目标基本上是创建一个选项卡效果，所以如果我选择一个单选按钮，内容就会显示出来，所有其他 div 的不透明度都设置为 0。我认为这在 JavaScript 中是可能的，但我做不到代码呢。另外，我在某处读到依赖 JavaScript 来实现功能并不好，因为它可以被禁用。

谢谢!

编辑:

这是应用了所有 html 和 CSS 后的代码。您可以将鼠标悬停在选项卡上，它们会改变颜色。现在的目标是在选择选项卡时显示内容。

Answer 1

如果您不想使用任何 JavaScript，则不重新组织您的 HTML 结构是不可能的。那example可以帮助你。