css selector:nth-child(even | odd)vs:nth-child(int)
wil*_*ber 2 html css css-selectors css3
我有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(我真的很困惑,因为那......)
另外,我发布了一些当前问题的屏幕:
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; }