Question

我来找你们因为我听说不是使用javascript来选择每2个元素，你可以使用nth-child css3选择器......

我试图使用它，但它并没有像我期望的那样工作......对我来说没有意义，它没有工作......

这是我使用nth-child（单数）时得到的结果：

enter image description here

第一个元素运作良好......保证金正在运作。但不是第三个元素有余量，它是第四个拥有它的元素......我真的不明白为什么会这样......

一些代码：

<section id="portfolio">
    <ul>
        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/547404026266152.jpg);">
            <div id="portfolio-details"><img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/04/logo-v2-slogan.png"></div>
        </li>

        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/a_Hamburger-Bun-with-HamburgerS_3.jpg);">
            <div id="portfolio-details"><img id="portfolio-logo" src=""></div>
        </li>

        <li style="list-style: none; display: inline">
            <div id="portfolio-selected"></div>
        </li>

        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/24346_l.jpg);">
            <div id="portfolio-details"><img id="portfolio-logo" src=""></div>
        </li>

        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/unnamed-1.jpg);">
            <div id="portfolio-details"><img id="portfolio-logo" src=""></div>
        </li>

        <li style="list-style: none; display: inline">
            <div id="portfolio-selected"></div>
        </li>

        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/maximoto.png);">
            <div id="portfolio-details"><img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/03/maxi1.png"></div>
        </li>

        <li style="list-style: none; display: inline">
            <div id="portfolio-selected"></div>
        </li>
    </ul>
</section>

和CSS：

#portfolio {
    width:100%;
    margin:40px 0 0
}

#portfolio ul {
    list-style:none
}

#portfolio ul li {
    display:inline-block;
    height:300px;
    width:470px;
    background-size:100% 100%;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
    transition:all .2s linear
}

.single-portfolio:nth-child(odd) {
    margin-right:26px
}

#portfolio ul li:hover {
    cursor:pointer;
    -webkit-filter:grayscale(0%);
    filter:grayscale(0%)
}

#portfolio-details {
    background:rgba(150,150,150,0.7);
    width:100%;
    height:100%;
    transition:all .2s linear;
    vertical-align:middle;
    text-align:center;
    position:relative
}

#portfolio-details img {
    transition:all .2s linear;
    margin:0 auto;
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    max-width:300px
}

#portfolio-details:hover {
    background:rgba(26,188,156,0);
    width:100%;
    height:100%
}

#portfolio-details:hover img {
    opacity:0
}

如果你们能帮助我并解释我的错误......会很棒！

提前致谢

Answer 1

看起来它对我来说正常。

您的PHP正在渲染空元素。这让你感到困惑。

如果需要空元素，也许你应该给他们一个不同的类。或者在非空元素上使用第二个类来进行此CSS处理。

编辑：

我的建议不起作用。 Read this。 nth-child只关心匹配元素有多少兄弟姐妹。它不会过滤它们。

您需要使用PHP将.odd类添加到要设置样式的元素中，或者以某种激烈的方式更改标记，以便为CSS提供奇数元素的句柄。

Answer 2

由于<div id="portfolio-selected"></div>位于列表之间，因此nth-child()将无效。请改用nth-of-type()：

.single-portfolio:nth-of-type(odd) {...}

<强>演示：

$(".single-portfolio").eq(0).addClass('green')

.single-portfolio:nth-of-type(odd) {color:red}

.green{color:green;}

<section id="portfolio">
    <ul>
        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/547404026266152.jpg);">
            <div id="portfolio-details">
                <img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/04/logo-v2-slogan.png">
            </div>
        </li>
        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/a_Hamburger-Bun-with-HamburgerS_3.jpg);">
            <div id="portfolio-details">
                <img id="portfolio-logo" src=""/>
            </div>
        </li>
        <div id="portfolio-selected"></div>
        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/24346_l.jpg);">
            <div id="portfolio-details">
                <img id="portfolio-logo" src=""/>
            </div>
        </li>
        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/unnamed-1.jpg);">
            <div id="portfolio-details">
                <img id="portfolio-logo" src="">
            </div>
        </li>
        <div id="portfolio-selected"></div>
        <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/maximoto.png);">
            <div id="portfolio-details">
                <img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/03/maxi1.png">
            </div>
        </li>
        <div id="portfolio-selected"></div>
    </ul>
</section>

Css3 nth-child选择器不按预期方式运行

2 个答案: