Question

我对CSS :nth-child伪选择器有以下问题，我很确定我错过了一些东西。

index.html

<html>
<head>...</head>

    <body>

        <div class='selector'>first</div>
        <div class='selector'>second</div>
        <div class='selector'>third</div>
        <div class='selector'>fourth</div>
        <div class='selector'>fifth</div>

    </body>

</html>

style_does_not_work.css （不起作用）

.selector { background-color: #ffffff; }
.selector:nth-child(1) { background-color: #f00000; }
.selector:nth-child(2) { background-color: #ff0000; }
.selector:nth-child(3) { background-color: #fff000; }
.selector:nth-child(4) { background-color: #ffff00; }
.selector:nth-child(5) { background-color: #fffff0; }

style_that_works.css （用于选择器概念的证明）

.selector { background-color: #ffffff; }
.selector:nth-child(even) { background-color: #f00000; }
.selector:nth-child(odd) { background-color: #ff0000; }

我有点困惑，为什么:nth-child(2)不起作用，:nth-child(even)呢。是否有差异或我错过的东西？

我的目标是为固定的定位元素提供从顶部开始的动态偏移，同时动态地通过javascript注入和删除元素。

更新/附加

不幸的是，我在上面的例子中写了一个拼写错误。但不幸的是，这并没有解决实际问题 - 即使我看到工作的JS-Fiddles（我真的很困惑因为......）

此外，我发布了一些关于当前问题的屏幕：

Markup Sample

CSS：

.notification-area {
    position: fixed;
    z-index: 999;
    width: 500px;
    height: 100%;
    overflow: hidden;
}

.notification-area.top-right {
    top: 25px;
    right: 25px;
    left: auto;

    -webkit-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
    -moz-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
    -ms-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
    -o-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
    transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;

}

/* these lines are completely ignored */

.notification-area:nth-child(2) { margin: 125px 0px 0px 0px; }
.notification-area:nth-child(3) { margin: 250px 0px 0px 0px; }
.notification-area:nth-child(4) { margin: 375px 0px 0px 0px; }
.notification-area:nth-child(5) { margin: 500px 0px 0px 0px; }


/* this line grabs instead - I don't want to use "even", but it shows me, that the selector :nth-child() should be fine... */
.notification-area:nth-child(even) { margin: 125px 0px 0px 0px; }

Answer 1

您未在第二个div关闭.selector。工作正常：

fiddle

Answer 2

你错过了在第二个div中关闭div的标签。

Answer 3

试试这个：nth-child（n + 1）而不是：nth-child（2）

Answer 4

尝试将nth-child(n)更改为nth-of-type(n)，因为我们未使用其子节点。之前我已经删除了这个答案，因为我认为真正的问题是你忘了关闭你的一个div，但你似乎还没有解决它，所以我会再次发布它。

css selector：nth-child（even | odd）vs：nth-child（int）

4 个答案:

css selector：nth-​​child（even | odd）vs：nth-​​child（int）

4 个答案:

css selector：nth-child（even | odd）vs：nth-child（int）