Question

用于第一个<i>的图标和子项的<div>应该有一个大图标。任何<i>（但不是第一个）的任何其他<div>子项都应具有中等大小的图标：

<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

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

值 a 可以为负值，但只有 a n + b <的正值/ em>，对于n≥0，可以表示文档树中的元素。

虽然它说的是第一个孩子的索引，实际上是1，它所指的是公式的结果，而不是n的值。换句话说，第一个孩子由n的函数表示，其评估为1，而不是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支持的附加功能。

理解nth-child（an + b）：CSS3中的公式选择器？

1 个答案: