Question

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

第一种情况：

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

JQUERY：

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

如果有人能帮助我，我会感激不尽。感谢。

修改

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

Answer 1

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

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

尝试将.continut元素包装在另一个<div>

中

CSS第一子选择器不适用于大多数元素

1 个答案: