Css 为什么不是'；t我的：第n个子选择器工作？

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

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

---

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

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

css:

html:

正文
单词

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

<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 .capa4 {}

此选择器选择所有

.capa4

元素，这些元素是

.capa43

类处于

：活动状态的后代。这不是“当
.capa43
处于活动状态时，查找
.capa4
元素并设置它们的样式。”而是关系。您在这里尝试的通常被称为“父选择器”，它在CSS中不存在

第二,

：第n个子元素
作用于元素本身，而不是父元素。它问‘我是我父母的第n个孩子吗？’

要使用纯CSS实现这一点，您需要重新构造HTML，并使用同级选择器


.capa43:active~.micapa4:n子级（2）{
颜色：红色；
}
.capa43:活动~.micapa4:第n个孩子（3）{
显示：无；
}

振幅
洛杉矶41
洛杉矶42
.capa43
不是
capa4:n子项（1）
或
的父项。capa4:n子项（2）
。和
div
没有
：活动的
伪类。尝试使用其他一些标记结构，在其中使用链接needed@FabrizioCalderan实际上，不仅链接现在有
：active
伪类；）（因为IE8）听起来像是黑客单选按钮控件的工作，或者是js来实现这一点。很高兴知道，但仍然没有信心开始在div上使用它（IE8仍然存在）@Fabriziocarderan它在IE8中确实有效。IE7不受支持。Tbh在实践中，我没有必要在这些类型的元素上使用
：active
，但是
：hover
是非常有用的（IE>=7支持它，所以更好）
div:active
不起作用，
~
需要最后一条规则你是对的（仅在第二部分；），只是修复了它，根据问题的意图，您的示例和演示中孩子的编号都不正确。@Oka，oh，details，details:）
    <div id="d1">
      Text
    <div id="d2">Word
      <a href="#d2">My other text</a>
    </div>

<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; }

.capa43:active .capa4 {}