4

<i>用于图标和第一个子级的应该<div>有一个大图标。any 的任何其他<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>应跳过。但是第一个大图标与最后一条规则匹配。我错过了什么？

4

1 回答 1

7

nin:nth-child()实际上从零开始计数，而不是从一开始。从规格：

值a可以是负数，但只有+的正值（对于≥0）可以表示文档树中的一个元素。anbn

虽然它说 1 的第一个孩子的索引，确实是，但它所指的是公式的结果，而不是n. 换句话说，第一个孩子由n计算为 1 的函数表示，而不是由nwheren = 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-"]

或者为了让事情更简单，您可以选择通用兄弟组合~器来:first-child代替：

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

这有一个额外的 IE7/IE8 支持，以防万一。

于 2012-07-20T09:34:24.107 回答