css - 理解第 n 个 child (an + b): selector with formula in CSS3?

Question

<i>用于第一个的图标和 child <div>应该有一个大图标。任何其他 <i>任何 <div> 的 child (但不是第一个)应该有一个中等大小的图标:

<div class="row list-item">
       <div class="span1">
           <i class="icon-user"></i>
       </div>

       <div class="span3">
           <div>
               <a href="#">Main Link</a> <i class="icon-male"></i>
           </div>
           <i class="icon-mail"></i> <a href="#">Link 2</a>
           <i class="icon-mobile"></i> <a href="#">Link 3</a>
       </div>
</div>

相关 CSS:

.list-item > div:first-child {
    text-align: center;
}

.list-item i[class^="icon-"], .list-item[class*=" icon-"] {
    text-shadow: 3px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Only i with icon-* class, where div is first child */
.list-item > div:first-child > i[class^="icon-"],
    .list-item > div:first-child > i[class*=" icon-"] {
    font-size: 60px;
    line-height: 80px;
}

/* Any i with icon-* class, where div is not first child */
.list-item > div:nth-child(1n+1) > i[class^="icon-"], 
    .list-item > div:nth-child(1n+1) > i[class*=" icon-"] {
    vertical-align: middle;
    font-size: 24px;
    line-height: 24px;
}

所以我在公式 nth-child(an + b) 中使用了偏移量, 与 b = 1 .即偏移量为 1 所以首先 <div>应该跳过。但是第一个大图标与最后一条规则相匹配。我缺少什么？

Answer 1

:nth-child() 中的n 实际上是从零开始计数，而不是从一开始计数。来自spec :

The value a can be negative, but only the positive values of an+b, for n≥0, may represent an element in the document tree.

虽然它说 1 的第一个 child 的索引，确实是，它指的是公式的结果，而不是 n 的值。换句话说，第一个 child 由求值为 1 的 n 函数表示，而不是由 n 的函数表示，其中 n = 0或 n = 1(从哪个开始计数)。

因此公式 :nth-child(1n+1)(或代数等价的 :nth-child(n+1))的计算结果为 n = 0 作为:

  1n + 1
= 1(0) + 1
= 0 + 1
= 1

这会导致您的第一个 div 被匹配。

您需要从 2 开始，伪类符号才能按预期工作:

.list-item > div:nth-child(1n+2) > i[class^="icon-"], 
.list-item > div:nth-child(1n+2) > i[class*=" icon-"]

或者为了使事情更简单，您可以选择 general sibling combinator ~结合 :first-child 而不是:

.list-item > div:first-child ~ div > i[class^="icon-"], 
.list-item > div:first-child ~ div > i[class*=" icon-"]

如果重要的话，这还有 IE7/IE8 支持的额外好处。