html - CSS 的表达方式和

Question

我正在尝试做一种纯 html/css 标签系统。我有

<div>
    <input class="tab1" type="radio" checked/>
    <input class="tab2" type="radio"/>
</div>

<div class="content">
    <div class="tab-1">

    </div>
    <div class="tab-2">

    </div>
</div>

还有我的CSS

.content > div {
    opacity:0;
}

input.tab1:checked ~ .tab-1, input.tab2:checked ~ .tab-2  {
    opacity: 1
}

但是波浪号 ~ 并没有像它应该的那样工作(因为 div 不完全是兄弟)- 我怎样才能让 css 在其他节点上工作？有没有一种在 css 中“说”的方式？

Answer 1

您必须上一级，而在 CSS 中不能这样做，因为 CSS 中没有父选择器。您可能想阅读这篇文章:why we don't have a parent selector in CSS (然而，CSS4 中会有一个父选择器)

你可以做什么:

选项 1:更改您的 HTML:

.a

<input class="tab1" type="radio" checked/>
<input class="tab2" type="radio"/>

<div class="content">
    <div class="tab-1"></div>
    <div class="tab-2"></div>
</div>

并使用 input.tab1:checked ~ .content .tab-1

.b 试试这里描述的结构:http://css-tricks.com/functional-css-tabs-revisited/ - 基本上，您的想法是不要制作一组选项卡和一组选项卡内容，而是将每个选项卡与其相应的内容分组。

选项 2:使用 JavaScript(这与纯 CSS 选项卡系统的想法背道而驰，这是真的)

---

重要说明:请记住，在父节点上设置 opacity < 0 会使所有子节点具有相同的 opacity 值和 < em>你无法改变它(除了再次将父级的不透明度设置为 1 :P)。