Question

我有一个ul和li的列表。

现在我只想将css规则应用于父母而不是孩子。

为此，我正在使用＆gt;符号，但也适用于儿童。

示例here

我在css使用的代码 -

#nav > li a {
    padding-bottom: 30px;
}

html是 -

 <ul id="nav">
    <li>
        <a href="#" title="Return home">Home</a>
    </li>
    <li>
        <a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>

    </li>
    <li>
        <a href="#" title="The services we offer">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>         
        </ul>
    </li>
    <li>
        <a href="#" title="Our product range">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>
            <li><a href="#">Small product (two)</a></li>                
        </ul>
    </li>
    <li>
        <a href="#" title="Get in touch with us">Contact</a>
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </li>
</ul>

Answer 1

我认为你想使用#nav > li > a来涵盖a的{{1}}个孩子。否则，<li>的任何<a>后代也会被选中（这就是一切）。

Answer 2

从CSS3开始，无法根据子元素选择元素。我认为这样的东西会出现在CSS4中，但我不确定。

小注意：>选择器仅选择子项，而不是父项和子项。

无法仅将css规则应用于父元素

2 个答案: