2

我在使用 :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;
}

查询：

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

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

编辑：

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

4

1 回答 1

4

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

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

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

于 2013-08-15T11:27:12.387 回答