1

<li>CSS を使用して最後のタグと 2 番目のタグのスタイルを設定する方法はありますか。使ってみてアタリul li:nth-child(6)をつけたのpadding-top:10px;ですが、全メニューのパディングトップが変わっています。

<ul>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
    <li><a href="#"><span>Menu 7</span></a></li>
</ul>

これを解決する他の方法はありますか、それとも CSS に何か不足していますか? あなたの助けは大歓迎です!

ありがとう

4

5 に答える 5

5

他の同様の提案として、このソリューションは一部の古いブラウザでは機能しません。

ul li:last-child, ul li:nth-last-child(2) {
  padding-top: 10px;
}

このように、スタイルシートはリスト内の特定のアイテム数に依存しません。

于 2012-07-30T11:28:39.507 に答える
1

この方法を試してください、 

 ul li:nth-child(6), ul li:nth-child(7) {
    padding-top:10px;
}
于 2012-07-30T10:57:11.090 に答える
1 
ul li :nth-child(6)
     {
       padding-top:10px;
     }
ul li:last-child
    {
      padding-top:10px;
     }
于 2012-07-30T10:07:45.280 に答える
1 
<ul>
        <li><a href="#"><span>Menu 1</span></a></li>
        <li><a href="#"><span>Menu 2</span></a></li>
        <li><a href="#"><span>Menu 3</span></a></li>
        <li><a href="#"><span>Menu 4</span></a></li>
        <li><a href="#"><span>Menu 5</span></a></li>
        <li class="last"><a href="#"><span>Menu 6</span></a></li>
        <li class="last"><a href="#"><span>Menu 7</span></a></li>
    </ul>

そしてcssファイルで

.last
        {
            padding-top: 10px;
        }
于 2012-07-30T10:09:41.023 に答える
1

上記のように、コードは機能します：

HTML:

<ul>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
    <li><a href="#"><span>Menu 7</span></a></li>
</ul>​

CSS:

ul li:nth-child(6)
{
    padding-top:10px;
}​

おそらく、ブラウザには互換性のある CSS3 セレクターがありません (IE を使用している場合は可能性はありません)。簡単なブラウザ サポート リストを次に示します。nth-child サポート

于 2012-07-30T10:16:05.253 に答える