4

次のcssがあり、クラス「myClass」を持たない最後の子を変更する必要がありますが、動作させることができないようです。

私が間違っているアイデアはありますか？

ul li:not(.myClass):last-child a {
    font-style:italic;
}

要求されたHTMLの例：

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li class="myClass"><a href="#">Extra</a></li>
</ul>

cssをlithreeに適用したい...

4

5 に答える 5

2

これは、jQueryを使用できる場合にのみ、cssで実行できません。このソリューションが役立つ場合があります。

http://jsfiddle.net/6ku3Y/

$('ul li').not('.myClass').last().find('a').addClass('mystyle');​
于 2012-09-19T09:39:22.233 に答える
1

ターゲットにする要素が最後の1つであることが確実な場合は、次を使用できます。nth-last-child(2)

ul li:nth-last-child(2) a {
    border-right:0px solid #000;
}
于 2012-09-19T09:20:34.940 に答える
0

cssをli3にのみ適用する場合は、：nth-​​child（3）を試してください。

ul li:nth-child(3) a​ {
    border-right:0
}​

http://jsfiddle.net/hhncn/

この疑似クラスは、親要素の子要素のリスト内の位置に基づいて要素を照合します。– http://reference.sitepoint.com/css/pseudoclass-nthchild

于 2012-09-19T09:16:07.433 に答える
0

次のようなものを試してください。

ul li:not(.myClass):nth-last-of-type(2) a {
    border-right:0px solid #000;
}

デモを見る

于 2012-09-19T09:23:20.910 に答える
0

現在のCSS構文では、ANDオペレーターがこの種のスタイルを実行できるようにすることはできません。必要なのはCSSLESSフレームワークです。

これにより、次のことが可能になります。

ul > li:not(.myClass) {
  li:last-child {
    //style here
    }
}
于 2012-09-19T09:33:57.980 に答える