Html css选择器不'；t在所选id上设置不透明度

我正在试验由单选按钮组成的选项卡式导航。 我的问题是，当我单击选项卡时，所选id的不透明度没有改变，因此内容不可见

我的HTML代码：

<div id="container">

<div id="tabs">     
    <input id="tab-1" type="radio" name="tab-group" checked="checked" />
    <label for="tab-1">Tab 1</label>
    <input id="tab-2" type="radio" name="tab-group" />
    <label for="tab-2">Tab 2</label>
    <input id="tab-3" type="radio" name="tab-group" />
    <label for="tab-3">Tab 3</label>
</div>

<div id="content">

    <div id="content-1">
        <form>
            First name:<br>
            <input type="text" name="firstname"><br>
            Last name:<br>
            <input type="text" name="lastname">
        </form> 
    </div>

    <div id="content-2">
        <p class="column-left"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        <p class="column-right"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>

    <div id="content-3">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing it.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing it.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
</div>

我认为问题在于3行选择器“#tabs input#tab-1:checked#content#content-1”

我试着用不同的语法重写这一行，但没有任何效果

---

请帮助。

与

#content

匹配的div不是任何

输入的同级。它是父母的兄弟姐妹

我姑妈不是我妹妹

您无法使用CSS选择器从输入绘制到
#content-X
的链接

为此，您需要使用JavaScript。
匹配
内容的div不是任何
输入的同级。它是父母的兄弟姐妹

我姑妈不是我妹妹

您无法使用CSS选择器从输入绘制到
#content-X
的链接

为此，您需要使用JavaScript。

*{
字体系列：Arial，sans；
保证金：0；
填充：0；
框大小：边框框；
-moz框大小：边框框；
}
#容器{
垫面：6em；
保证金：0自动；
宽度：50%；
}
#制表符输入{
高度：2.5em；
可见性：隐藏；
}
#标签{
背景#f9f9f9；
边界半径：.25em.25em 0；
颜色：红色；
光标：指针；
显示：块；
浮动：左；
字号：1em；
高度：2.5em；
线高：2.5em；
右边距：.25em；/*制表符之间的间距*/
填充：0.1.5em；
文本对齐：居中；
}
#选项卡输入：悬停+标签{
背景：ddd；
颜色：蓝绿色；
}
#选项卡输入：选中+标签{
背景：黑色；
颜色：白色；
位置：相对位置；
z指数：6；
}
#内容{
背景：红色；
边界半径：0.25em.25em.25em；
最小高度：20em；
位置：相对位置；
宽度：100%；
z指数：5；
溢出y：自动；
}
#内容部{
不透明度：0；
填充：1.5em；
位置：绝对位置；
z指数：-100；
过渡：全线性0.1s；
}
#制表符输入#制表符1：选中#内容分区#内容1，
#制表符输入#制表符2：选中#内容分区#内容2，
#制表符输入#制表符3：选中#内容分区#内容3{
不透明度：1；
z指数：1000；
}
input.visible{
可见性：可见！重要；
}

表1
表2
表3
名字：



姓氏：

洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet）是一位杰出人物
Lorem ipsum Door sit amet，Concetetur Adipising Elite
Lorem ipsum dolor sit amet，奉献精英


Lorem ipsum Door sit amet，将它奉献给我们
Lorem ipsum Door sit amet，将它奉献给我们
Lorem ipsum dolor sit amet，奉献精英

Lorem ipsum dolor sit amet，奉献精英


*{
字体系列：Arial，sans；
保证金：0；
填充：0；
框大小：边框框；
-moz框大小：边框框；
}
#容器{
垫面：6em；
保证金：0自动；
宽度：50%；
}
#制表符输入{
高度：2.5em；
可见性：隐藏；
}
#标签{
背景#f9f9f9；
边界半径：.25em.25em 0；
颜色：红色；
光标：指针；
显示：块；
浮动：左；
字号：1em；
高度：2.5em；
线高：2.5em；
右边距：.25em；/*制表符之间的间距*/
填充：0.1.5em；
文本对齐：居中；
}
#选项卡输入：悬停+标签{
背景：ddd；
颜色：蓝绿色；
}
#选项卡输入：选中+标签{
背景：黑色；
颜色：白色；
位置：相对位置；
z指数：6；
}
#内容{
背景：红色；
边界半径：0.25em.25em.25em；
最小高度：20em；
位置：相对位置；
宽度：100%；
z指数：5；
溢出y：自动；
}
#内容部{
不透明度：0；
填充：1.5em；
位置：绝对位置；
z指数：-100；
过渡：全线性0.1s；
}
#制表符输入#制表符1：选中#内容分区#内容1，
#制表符输入#制表符2：选中#内容分区#内容2，
#制表符输入#制表符3：选中#内容分区#内容3{
不透明度：1；
z指数：1000；
}
input.visible{
可见性：可见！重要；
}

表1
表2
表3
名字：



姓氏：

洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet）是一位杰出人物
Lorem ipsum Door sit amet，Concetetur Adipising Elite
Lorem ipsum dolor sit amet，奉献精英


Lorem ipsum Door sit amet，将它奉献给我们
Lorem ipsum Door sit amet，将它奉献给我们
Lorem ipsum dolor sit amet，奉献精英

Lorem ipsum dolor sit amet，奉献精英

正如您现在的HTML结构一样，如果您不想更改必须使用的HTML结构（例如Javascript），您就不能在tab1和content1之间设置仅使用CSS的关系（它们之间没有关系）。正如您现在的HTML结构一样，您不能在tab1和content1之间设置仅使用CSS的关系（它们之间没有关系）如果你不想改变HTML结构，你必须使用javascriptThank你的清理！所以基本上我可以删除#tabs div标签使其工作。希望是的，修改css以满足你的需要。重要的是你必须使用兄弟元素使其工作。感谢你的清理！所以基本上我可以uld移除#tabs div标签，使其
* {
    font-family: Arial, sans;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}


#container {
  padding-top: 6em;
  margin: 0 auto;
  width: 50%;
}

#tabs input {
  height: 2.5em;
  visibility: hidden;
}

#tabs label {
  background: #f9f9f9;
  border-radius: .25em .25em 0 0;
  color: red;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 1em;
  height: 2.5em;
  line-height: 2.5em;
  margin-right: .25em;  /*space between tabs*/
  padding: 0 1.5em;
  text-align: center;
}

#tabs input:hover + label {
  background: #ddd;
  color: lawngreen;
}

#tabs input:checked + label {
  background: black;
  color: white;
  position: relative;
  z-index: 6;
}

#content {
  background: red;
  border-radius: 0 .25em .25em .25em;
  min-height: 20em;
  position: relative;
  width: 100%;
  z-index: 5;
}

#content div {
  opacity: 0;
  padding: 1.5em;
  position: absolute;
  z-index: -100;
  transition: all linear 0.1s;
}

#tabs input#tab-1:checked ~ #content #content-1,
#tabs input#tab-2:checked ~ #content #content-2,
#tabs input#tab-3:checked ~ #content #content-3 {
  opacity: 1;    
  z-index: 100;
}


input.visible {
  visibility: visible !important;
}