了解nth-child（an + b）：CSS3中的公式选择器？ [英] Understanding nth-child(an + b): selector with formula in CSS3?

问题描述

用于第一个< div> 的图标和子元素的< i> 图标。任何< div> （但不是第一个）的任何其他< i> 图标：

 < div class =row list-item> 
< div class =span1> 
< i class =icon-user>< / i> 
< / div> 
 
< div class =span3> 
< div> 
< a href =＃>主链接< / a> < i class =icon-male>< / i> 
< / div> 
< i class =icon-mail>< / i> < a href =＃>链接2< / a> 
< i class =icon-mobile>< / i> < a href =＃>链接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）; 
} 
 
 / *只有i与icon- *类，其中div是第一个孩子* / 
 .list-item> div：first-child> i [class ^ =icon-]，
 .list-item> div：first-child> i [class * =icon-] {
 font-size：60px; 
 line-height：80px; 
} 
 
 / *任何i与icon- *类，其中div不是第一个孩子* / 
 .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- a + b），其中 b = 1 。这是偏移量为1所以第一个< div> 应该跳过。但是第一个大图标与最后一条规则相匹配。 c c

$ c>：nth-​​child（）实际上从零开始计数，而不是一个。从规范：

值a可以为负数，但只能是 a + b ， n ≥0，可表示文档树中的元素。

虽然它说第一个孩子的索引1，这是它，它是指的是公式的结果，而不是 n 。换句话说，第一个子程序由 n 的函数表示，计算结果为1，而不是 n n = 0 或 n = 1 （以其开始计算的日期）。

所以公式：nth-​​child（1n + 1）（或代数等同：nth- 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的支持，以防万一。

The <i> used for icons and child of the first <div> should have a big icon. Any other <i> child of any <div> (but not the first) should have a medium size icon:

<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>

Relevant 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;
}

So i used offset in formula nth-child(an + b), with b = 1. That is offset is 1 so first <div> should be skipped. But the first big icon is matched by the last rule. What i'm missing?

解决方案

The n in :nth-child() actually starts counting from zero, rather than one. From the 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.

Although it says that the index of the first child of 1, which indeed it is, what it's referring to is the result of the formula, not the value of n. In other words, the first child is represented by a function of n that evaluates to 1, not by a function of n where n = 0 or n = 1 (whichever it starts counting at).

So the formula :nth-child(1n+1) (or algebraically equivalent :nth-child(n+1)) evaluates for n = 0 as:

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

Which results in your first div being matched.

You need to start from 2 for the pseudo-class notation to work as expected:

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

Or to make things simpler, you can opt for the general sibling combinator ~ in conjunction with :first-child instead:

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

This has an added bonus of IE7/IE8 support, in case it matters.

这篇关于了解nth-child（an + b）：CSS3中的公式选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！