html - 为什么 '>' 组合子也没有像我预期的那样工作？我必须分别设计我认为可以一起设计的元素

Question

这是代码后面的 fiddle 。 http://jsfiddle.net/ogr27cLa/4/

<div>
<ul id="navigation">
    <a href="http://www.google.com"><li>
        <p>one</p>
        <ul>
            <a href="http://www.bing.com"><li>
                <p>one</p>
            </li></a>
            <a href="#"><li>
                <p>two</p>
            </li></a>
            <a href="#"><li>
                <p>three</p>
            </li></a>
            <a href="#"><li>
                <p>four</p>
            </li></a>
            <a href="#"><li>
                <p>five</p>
            </li></a>
            <a href="#"><li>
                <p>six</p>
            </li></a>
        </ul>
    </li></a>
    <a href="#"><li>
        <p>two</p>
        <ul>
            <a href="#"><li>
                <p>one</p>
            </li></a>
            <a href="#"><li>
                <p>two</p>
            </li></a>
            <a href="#"><li>
                <p>three</p>
            </li></a>
            <a href="#"><li>
                <p>four</p>
            </li></a>
        </ul>
    </li></a>
    <a href="#"><li>
        <p>three</p>
        <ul>
            <a href="#"><li>
                <p>one</p>
            </li></a>
            <a href="#"><li>
                <p>two</p>
            </li></a>
            <a href="#"><li>
                <p>three</p>
            </li></a>
            <a href="#"><li>
                <p>four</p>
            </li></a>
            <a href="#"><li>
                <p>five</p>
            </li></a>
            <a href="#"><li>
                <p>six</p>
            </li></a>
        </ul>
    </li></a>
    <li>
        <p>four</p>
        <ul>
            <a href="#"><li>
                <p>one</p>
            </li></a>
            <a href="#"><li>
                <p>two</p>
            </li></a>
            <a href="#"><li>
                <p>three</p>
            </li></a>
            <a href="#"><li>
                <p>four</p>
            </li></a>
            <a href="#"><li>
                <p>five</p>
            </li></a>
        </ul>
    </li>
    <a href="#"><li>
        <p>five</p>
    </li></a>
    <a href="#"><li>
        <p>six</p>
    </li></a>
</ul>

/* basic overrides for user agent */
html, body, ul, li, p, div {
    margin: 0;
    padding: 0;
}
/* This div is going to stretch the width of the body */
div {
    width: 100%;
    background: #00f; /* replace with background image */
}
/* navigation is a list of buttons */
ul#navigation {
    margin: auto;
    list-style-type: none;
    position: relative;
    font-size: 0;
    height: 30px;
    width: 957px;
    line-height: 30px;
}
/* all paragraph elements in the nav */
ul#navigation p {
    font-size: 16px;
    text-align: center;
    height: 30px;
    vertical-align: middle;
    color: #fff;
}
/* all anchor tags in the nav */
ul#navigation a {
    text-decoration: none;
    color: #fff;
}
/* non-nested nav buttons */
ul#navigation>li {
    display: inline-block;
    background: #00f; /* replace with background image */
}
/* hover behavior for non-nested nav buttons */
ul#navigation>li:hover {
    background: #55f; /* replace with background image */
}
/* non-nested nav buttons with no nested nav */
ul#navigation>a li {
    display: inline-block;
    background: #00f; /* replace with background image */
}
/* hover behavior for non-nested nav buttons with no nested nav */
ul#navigation>a li:hover {
    background: #55f; /* replace with background image */
}
/* behavior for when you hover over the non-nested nav buttons that styles the nested nav */
ul#navigation li:hover ul {
    display: block;
}
/* nested nav */
ul#navigation ul {
    list-style-type: none;
    position: absolute;
    left: 0;
    display: none;
}
/* all nav buttons */
ul#navigation li {
    display: block;
    position: relative;
    float: left;
    height: 30px;
    width: 159px;
}
/* nested nav buttons */
ul#navigation li li {
    background: #00f;
}
/* behavior for hovering over a nested nav button */
ul#navigation li li:hover {
    background: #aaf;
}
/* behavior for when you hover over the nested nav buttons that styles the nested paragraph tag */
ul#navigation li li:hover p {
    color: #000;
}
</style>

基本上，为什么我必须使用 ul#navigation>a li 来设置没有嵌套 ul 和 ul#navigation>li 的导航按钮的样式为具有嵌套 ul 的样式设置样式？

Answer 1

请注意，您的 HTML 是无效的列表项元素(即 li)是列表元素(ul)的唯一有效子元素，您不应该放置任何其他元素ul

中的直接元素

除此之外，> 选择器与立即数 direct children of an element. 有关。

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.