4

アイコンに使用され、最初の<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>はスキップする必要があります。ただし、最初の大きなアイコンは最後のルールと一致します。私が欠けているものは何ですか？

4

1 に答える 1

7

ninは、実際:nth-child()には1ではなく0からカウントを開始します。スペックから：

値aは負の値にすることができますが、 0以上の場合、 +の正の値のみがドキュメントツリーの要素を表すことができます。anbn

1の最初の子のインデックスは実際にそうですが、それが参照しているのは式の結果であり、の値ではありませんn。言い換えると、最初の子は、 whereまたは（カウントを開始する方）nの関数ではなく、1と評価される関数で表されます。nn = 0n = 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 に答える