4

このJSFiddleでは、最後の.tabクラスは正しい効果を得ることができませんborder-radius（右上の丸い角）。

この場合:last-child、最後.tabのを選択すると言うのは私の論理が正しいと思います。.tabbed

私は何が間違っているのですか？

CSS：

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
    height: 550px;
}

.tabbed .tab {
    padding: 6px 14px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0px;
    border-left-width: 0;
    float: left;
}

.tabbed .tab:first-child {
    border-radius: 3px 0 0 0;
    border-left-width: 1px;
}

.tabbed .tab:last-child {
    border-radius: 0 3px 0 0;
}

HTML：

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
    <li> <br/><br/> </li>
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
</ul>
4

4 に答える 4

5

このドキュメントによると：

:first-child 疑似クラスは、「この要素がその親の最初の子である場合」を意味します。:last-child は、「この要素がその親の最後の子である場合」を意味します。要素ノード (HTML タグ) のみがカウントされることに注意してください。これらの疑似クラスはテキスト ノードを無視します。

W3C ドキュメントも参照してください

.tab最後は親ulの最後の子ではないため、あなたの場合は適用されません。

2 つのリストを作成すると、css が期待どおりに適用されます。

于 2012-01-01T13:56:43.823 に答える
3

コメントでは、次のように述べています。その場合は、次のようにします。

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
    <li>
    <ul>
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
    </ul>
    </li>
</ul>

次に、この css (最新のブラウザーを使用):

.tabbed {
height: 550px; }

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left; }

.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }

.tabbed .tab:nth-last-child(2) {
border-radius: 0 3px 0 0; }

.tabbed li:last-child {
   clear: left;
}

このフィドルを参照してください。

于 2012-01-01T16:33:23.333 に答える
1

Didier G.'s answerを拡張するには、ここで実際に使用する必要があるのは:first-of-type&:last-of-type疑似セレクターです。ただし、:nth-of-typeセレクター (およびその類似の簡略版) は、検索にクラス名を使用することをサポートしていないよう.tabbedです.tab。

.tabbed .tab:first-of-type

.tabbed一方、これは typeの最初の子を選択しますli:

.tabbed li:first-of-type

この動作を明示的に述べている参照は見つかりませんが、仕様では漠然と暗示されています。

:nth-of-type(an+b)疑似クラス表記は、an+b-1展開された同じ要素名を持つ兄弟を持つ要素を表します

展開された要素名はタグ名であり、クラスまたは ID セレクターにすることはできません。

この動作は JSFiddle でライブで確認できます。

于 2012-01-01T14:06:50.437 に答える
1

これが私がそれを行う方法です：

body {
    background: black;
    color: white;
    padding: 5px; }

.content {clear:both;}
.tall {
    height: 550px;
}

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
float: left; }

.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }

.tabbed .tab:last-child {
border-radius: 0 3px 0 0; }

と呼ばれるクラス内にコンテンツを含めるのは不適切だと思われるためtabbed、HTML を次のように構成するように変更します。

<div class="tall">
<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
</ul>
<ul class="content">
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
</ul>
</div>
<hr/><!-- just here to show you the height remains -->
于 2012-01-01T17:12:35.763 に答える