Css3 nth-child 选择器不按预期方式行事[重复]

Question

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

我尝试使用它，但它没有按我预期的方式工作......而且它没有工作对我来说毫无意义......

这是我使用 nth-child(odd) 时得到的结果：

第一个元素运行良好……边距运行良好。 但不是第三个元素有边距，而是第四个有边距......我真的不明白为什么会这样......

一些代码：

<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

由于<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>

Answer 2

对我来说它看起来工作正常。

您的 PHP 正在渲染空元素。这就是让你困惑的地方。

如果需要空元素，也许你应该给它们一个不同的类。或者在非空元素上使用第二个类，仅用于这种 CSS 处理。

编辑：

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

您需要使用 PHP 将 .odd 类添加到要设置样式的元素中，或者以某种剧烈的方式更改标记以使 CSS 能够处理奇怪的元素。