爲什麼CSS部分：獨生子選擇器不起作用？

我只是搞亂了新的HTML5標籤和僞選擇器，並注意到該部分：唯一 - 子選擇器似乎不起作用。我正在使用最新版本的Chrome（23.0）進行測試。爲什麼CSS部分：獨生子選擇器不起作用？

我的代碼是：

<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; 

    }

從理論上講，文本「第一個孩子的測試」應爲黃色，因爲在第二，僅次於一個DIV部分，但它沒有得到字體的黃色。

如果我將選擇器更改爲div：only-child，它將工作得很好。

你可以在這裏看到的jsfiddle：http://jsfiddle.net/KwzZs/3/

任何理由，這是不工作？

感謝

來源

2012-12-26 GR7

您似乎沒有任何'section'元素是'only-child'。你期待什麼規則匹配？ – robertc

此規則：

section:only-child

匹配一個section元件，其是一個only-child。

此規則（注意的空間）：

section :only-child

匹配其是section的only-child的元件。 Is this what you expected？

來源

2012-12-27 00:03:05 robertc

不斷被空間咬傷......謝謝@robertc，那正是我想要的。 – GR7

更確切地說，如果你想要'section' **的唯一子**，你應該使用'>'而不是空格：'section>：only-child'。後面跟着'：only-child'的空格表示其父代的唯一孩子，其中父代可能是或者可能不是'section'。 – BoltClock

x:only-child指x元素是其父唯一的孩子 - 而不是x只有一個孩子。

來源

2012-12-27 00:03:17 irrelephant

爲什麼CSS部分：獨生子選擇器不起作用？

回答

相關問題