Html 如何在CSS中组合具有不同父元素的两个元素？_Html_Css_Css Selectors

Html 如何在CSS中组合具有不同父元素的两个元素？

html css

Html 如何在CSS中组合具有不同父元素的两个元素？,html,css,css-selectors,Html,Css,Css Selectors,我目前正在尝试在不使用javaScript的情况下创建一个选项卡，并且只使用html和CSS，我发现使用单选按钮可以实现这一点 <body> <div id="a1" class="a1"> <div id="a2" class="a2"> <div id="a3" class="a3"> <div id="menu" class="menu"> <div id="menu-1"

我目前正在尝试在不使用javaScript的情况下创建一个

选项卡，并且只使用html和CSS，我发现使用单选按钮可以实现这一点
<body>

<div id="a1" class="a1">
   <div id="a2" class="a2">
     <div id="a3" class="a3">

       <div id="menu" class="menu">
         <div id="menu-1"> <input id=radio-1 checked ><label></label> </div>
         <div id="menu-2"> <input id=radio-2><label></label> </div>
         <div id="menu-3"> <input id=radio-3><label></label> </div>
       </div>

   </div>
 </div>
</div>

<div id="b1" class="b1">
   <div id="b2" class="b2">
     <div id="container" class="container">

        <div id="content1" class="content1"></div>
        <div id="content1" class="content1"></div>
        <div id="content1" class="content1"></div>

     </div>
  </div>
</div>

</body>

但问题是在我的html设计中，如上所述，radiobutton
和内容在不同的世界中已经放置得太多了……或者你可以说它们有不同的父树
如果我不改变html设计，是否有其他方法将具有不同父树的元素连接/组合到CSS中的选择器中
-谢谢你…
正如你所说的那样，单选按钮（在你的示例中实际上是一个文本输入，因为类型单选按钮和名称都丢失了）远远超出了CSS选择器的范围
因此，如果HTML保持不变，您就必须使用javascript
一个简单的方法是确保在单选按钮上有事件处理程序，并侦听（在选择中）更改
证明这一点。（注意，我已经自由地减少了HTML中id
属性的数量，并在
元素中添加了type
和name
属性。）

但是，不使用javascript也可以解决这个问题，尽管这需要您的HTML进行更改（稍微更改，但仍然如此）。诀窍是确保单选按钮位于选项卡及其内容所在的位置或级别之上
诀窍是使用（或滥用）选项使标签指向页面上任何位置的输入元素，并隐藏单选按钮
使用非常精简的HTML集

.trickery>输入{
显示：无；
}
.选项卡>标签{
显示：内联块；
宽度：8em；
边框：1件纯金；
}
.container>div{
显示：无；
最小高度：8em；
边框：1件纯金；
}
#tab-1：选中~.tabs[for=tab-1]，
#tab-2：选中~.tabs[for=tab-2]，
#tab-3：选中~.tabs[for=tab-3]{
背景颜色：金色；
}
[value=content-1]：选中~.container#content-1，
[value=content-2]：选中~.container#content-2，
[value=content-3]：选中~.container#content-3{
显示：块；
}

表一
表二
表三
内容一
内容二
内容三
正如您正确指出的，单选按钮（在您的示例中实际上是一个文本输入，因为缺少类型单选按钮和名称）远远超出了CSS选择器的范围
因此，如果HTML保持不变，您就必须使用javascript
一个简单的方法是确保在单选按钮上有事件处理程序，并侦听（在选择中）更改
（请注意，我已经自由地减少了HTML中id
属性的数量，并在
元素中添加了type
和name
属性。）

但是，不使用javascript也可以解决这个问题，尽管这需要您的HTML进行更改（稍微更改，但仍然如此）。诀窍是确保单选按钮位于选项卡及其内容所在的位置或级别之上
诀窍是使用（或滥用）选项使标签指向页面上任何位置的输入元素，并隐藏单选按钮
使用非常精简的HTML集

.trickery>输入{
显示：无；
}
.选项卡>标签{
显示：内联块；
宽度：8em；
边框：1件纯金；
}
.container>div{
显示：无；
最小高度：8em；
边框：1件纯金；
}
#tab-1：选中~.tabs[for=tab-1]，
#tab-2：选中~.tabs[for=tab-2]，
#tab-3：选中~.tabs[for=tab-3]{
背景颜色：金色；
}
[value=content-1]：选中~.container#content-1，
[value=content-2]：选中~.container#content-2，
[value=content-3]：选中~.container#content-3{
显示：块；
}

表一
表二
表三
内容一
内容二
内容三
如果您无法更改HTML…则不需要。您需要javascript。如果您无法更改HTML…则不需要。您需要javascript。谢谢。它可以工作…现在我可以从隐藏的收音机连接到位于不同位置的任何位置的标签和内容。只要隐藏的收音机位于顶级…或至少具有指向每个节点标签和c的路径内容…好主意！谢谢…它工作了…现在我可以从隐藏的收音机连接到不同位置的任何位置的标签和内容。只要隐藏的收音机在顶级…或者至少有到每个节点标签和内容的路径…好主意！
/* CSS */ 

#radio-1:checked ~ .content-1,
#radio-1:checked ~ .content-2,
#radio-1:checked ~ .content-3 {           
     opacity: 1;
     transition: all 1s;
     blablabla;
     blablabla;
 }

/* CSS */