3

新しい HTML5 タグと疑似セレクターをいじっていたところ、section:only-child セレクターが機能していないように見えることに気付きました。Chrome の最新バージョン (23.0) でこれをテストしています。

私のコードは次のとおりです。

<section id="s1">
    <div id="div1">abc</div>
    <div id="div2">
        <span>first span</span>
        <span class="sp">second span</span>
    </div>
</section>

<section>
    <div>first child test</div>
</section>​

CSSは次のとおりです。

section {
background-color: brown;
width: 400px;
height: 200px;
}

#s1 {
position: relative; 
background-color: rgba(0,255,0,0.5); 
border: 1px solid #000; width: 50%;
}

#div1 {
background-color: #0f0; 
position: relative;
}

#div2 {
background-color: #0ff; 
width: 200px; 
color: red;
}

#div2 .sp {
color: white;
text-decoration:line-through;
}

section:only-child {
color: yellow;

    }​

理論的には、2 番目のセクションには div が 1 つしかないため、「最初の子テスト」というテキストは黄色である必要がありますが、フォントの黄色が得られません。

セレクターを div:only-child に変更すると、問題なく動作します。

ここで jsfiddle を見ることができます: http://jsfiddle.net/KwzZs/3/

これが機能しない理由は何ですか？

ありがとう

4

2 に答える 2

8

このルール:

section:only-child

sectionである要素に一致しonly-childます。

このルール (スペースに注意してください):

section :only-child

only-childのである要素に一致しsectionます。 これはあなたが期待したものですか？

于 2012-12-27T00:03:05.753 に答える
1

x:only-childx要素がその親の唯一の子であることを意味します - 子xが1つしかないわけではありません。

于 2012-12-27T00:03:17.220 に答える