为什么不是我的：nth-​​child选择器工作？

Question

我有一个非常简单的例子：

<div class="capa4">
    <div class="micapa4 capa41">LA 41</div>
    <div class="micapa4 capa42">LA 42</div>
    <div class="capa43">Ampliar</div>
</div>

我想点击“capa43”并隐藏“capa42”并展开“capa41”。

.capa43:active .capa4:nth-child(1) { width:100%; }

.capa43:active .capa4:nth-child(2) { display:none; }

但这似乎不起作用。我做错了什么？

Answer 1

你在这里混淆了几件事。

首先，

.capa43:active .capa4 {}

此选择器会选择处于.capa4状态的.capa43类的 后代 的所有:active元素。它不是'当.capa43处于有效状态时，请找到.capa4元素并对其进行样式化。'这完全取决于关系。你在这里尝试的通常被称为“父选择器”，它在CSS中不存在。

其次，

:nth-child适用于元素本身，而不是父元素。它问'我是我父母的第N个孩子吗？'。

要使用纯CSS工作，您需要重构HTML，并使用兄弟选择器。

.capa43:active ~ .micapa4:nth-child(2) {
  color: red;
}
.capa43:active ~ .micapa4:nth-child(3) {
  display:none;
}

<div class="capa4">
  <div class="capa43">Ampliar</div>
  <div class="micapa4 capa41">LA 41</div>
  <div class="micapa4 capa42">LA 42</div>
</div>

Answer 2

这似乎回答了你的问题。我没有测试自己，但它应该有用。

Change css style of an element by clicking another

的CSS：

    #d2:target {
        display: none;
    }

HTML：

    <div id="d1">
      Text
    <div id="d2">Word
      <a href="#d2">My other text</a>
    </div>

Answer 3

您必须稍微更改这些项目的顺序：

<div class="capa4">
    <div class="capa43">Ampliar</div>
    <div class="micapa4 capa41">LA 41</div>
    <div class="micapa4 capa42">LA 42</div>
</div>

然后您将能够使用下一个兄弟选择器：

.capa43:active ~ .micapa4:nth-child(2) { width:100%; }
.capa43:active ~ .micapa4:nth-child(3) { display:none; }

以下是一个工作示例：http://jsbin.com/qudona/3/edit?html,css,output