-1

:before 疑似要素を使用して、それぞれの右側に仕切りを追加しようとしているアイテムのリストがあります。

残念ながら、最後の子と最初の子の両方と組み合わせて使用​​すると、リスト内のすべての要素が対象になるようです。

例 - http://codepen.io/anon/pen/rupqi

マークアップ

<ul class="nav nav--inline nav--secondary">
        <li><a class="nav--secondary__item" href="#">Site Map</a>        </li>
            <li><a class="nav--secondary__item" href="#" title="Search Terms">Search Terms</a>        </li>
            <li><a class="nav--secondary__item" href="#" title="Advanced Search">Advanced Search</a>        </li>
                            <li><a class="nav--secondary__item" href="#" title="Contact Us">Contact Us</a>        </li>
</ul>

CSS

.nav--inline, .nav--inline > li, .nav--inline > li > a { float: left; }

.nav--secondary__item {
    color: #706782;
    font-size: 1.2em;
    padding: 0.8em;
    position: relative;
    @include transition (background-color 0.5s ease-in-out);
}

.nav--secondary__item:before {
    content: "|";
    color: #939EB7;
    position: absolute;
    left: 0;
}

.nav--secondary__item:first-child:before, .nav--secondary__item:last-child:before { content: "*"; }

なぜこれが起こるのか、もしそうなら、それを修正する方法を知っている人はいますか?

4

2 に答える 2

4

CSS を次のように変更します。

li:first-child .nav--secondary__item:before, 
li:last-child .nav--secondary__item:before {
    content:"*";
}

.nav--secondary__item親の最初の子と最後の子であるため、li次のセレクターはそれらすべてにコンテンツを適用します。

.nav--secondary__item:first-child:before, 
.nav--secondary__item:last-child:before 
{ content: "*"; }

フィドル

:first-child疑似クラスは、同様に親の最初の子を選択し:last-childます。

:first-child CSS 疑似クラスは、親要素の最初の子要素である要素を表します。

ドキュメントを参照

于 2013-07-09T17:31:21.767 に答える
2

これは、a要素内に要素があり、それらの要素liに適用しているためです。first-childa

.nav--secondary__item:first-childそれぞれ.nav--secondary__itemの親aは周囲のものであり、あなたのliではありませんul。

クラスの命名スキームに従って、HTML を次のように変更できます。

<li class="nav--secondary__item">
  <a class="nav--secondary__item__link" href="#" title="Site Map">Site Map</a>
</li>

first-childまた、 /の CSS はlast-child少し調整する必要があります。

.nav--secondary__item:first-child .nav--secondary__item__link:before,
.nav--secondary__item:last-child .nav--secondary__item__link:before { 
  content: "*"; 
}

aまた、要素に適用されるスタイルが.nav--secondary__item__link代わりにクラスを使用するようにする必要があります。

あなたから分岐した例: http://codepen.io/anon/pen/rknmL

于 2013-07-09T17:32:02.250 に答える