jquery - CSS 首子选择器不适用于大多数元素

Question

我在使用 :first-child 选择器时遇到了问题。我似乎无法让它工作。我的代码的想法是对两个元素进行简单的转换，为此我需要使用 :first-child。我的代码中有 2 种或更多情况表明它不起作用。他们在这里:

第一种情况:

CSS:

.container_principal .continut.rand{
    display:none;
    sbackface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
}

.container_principal .continut.rand:first-child{
    display:block;
}

HTML

<div class="container_principal acasa">
    <div class="continut rand principal">Content goes here
    </div>

    <div class="continut rand produse">
    </div>

    <div class="continut rand despre">
    </div>

    <div class="continut rand servicii">
    </div>

    <div class="continut rand galerie">
    </div>

    <div class="continut rand contact">
    </div>
</div>

第二种情况(这里涉及到jquery，这个css的html和之前的一样)

CSS

.rotate{
transform:rotateY(180deg);
}

.rotate:first-child{
display:none;
}

.rotate:last-child{
display:block;
}

j查询:

$(".col_1.produse").click(function(){
        $(".continut.rand.principal, .continut.rand.produse").addClass("rotate");
    });

如果有人能帮助我，我将不胜感激。谢谢。

编辑:

这是包含我所有代码的 Fidlle。无法以任何其他方式重现该问题。 http://jsfiddle.net/hn8Ye/4/

Answer 1

如果您的 Fiddle 和您发布的代码相同，这会有所帮助。

first-child只匹配第一个元素。 .container_principal的第一个 child 是 .header ，因此 .container_principal .continut:first-child永远不会匹配。

尝试包装您的 .continut另一个元素 <div>