html - 为什么我的子选择器 #id > .test 没有效果？

Question

我的 html 看起来像这样:

<div id="hi">
    <div class="test"></div>
<div>

我的CSS如下:

.test {
    background-color: red;
    height: 20px;
    width: 20px; }

#id > .test {
    background-color: blue;
    border: 1px solid black; }

为什么我的测试类 div 的背景颜色没有更改为蓝色。

这是一个例子 jsfiddle来证明问题。

Answer 1

改变

#id > .test {

到

#hi > .test {