Css3 第 n 个子选择器未按预期方式运行

Question

我来找你们是因为我听说不是每 2 个元素使用 javascript 到 select，而是可以使用第 n 个子元素 css3 select或...

我尝试使用它，但它没有像我期望的那样工作...而且它不起作用对我来说毫无意义...

这是我使用 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

我觉得它工作正常。

您的 PHP 正在呈现空元素。这就是你的困惑。

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

编辑：

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

您需要使用 PHP 将 .odd class 添加到您想要设置样式的元素中，或者以某种极端的方式更改您的标记以提供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 第 n 个子选择器未按预期方式运行

Css3 nth-child selector don't act the way expected

html

javascript

css

css-selectors