Question

我想知道为什么这＆＃34;＆gt;＆＃34;选择器在这种情况下不起作用

    nav > ul > li > ul > li > a{
        color: red;
    }

但在这种情况下确实有效

    nav > ul > li > ul > li > a.item{
        color: red;
    }

.a是li的直接后代，为什么我必须指定类名。不应该得到李的孩子吗？这是.a

我刚刚意识到，如果我只是给你上述信息，但是如果我在上面的代码之前放入我拥有的其余css，那么只是把.a不起作用。为什么会发生这种情况

其余的css：

    html{
        height: 100%;
    }
    body{
        background-image: repeating-linear-gradient(315deg, #ddd, #ddd 40px, #aaa 40px, #aaa 80px);
        padding: 20px;
        height: 100%;
    }
    nav{
        margin: 0 auto;
        width: 960px;
        font-family: sans-serif;
        font-size: 0.6em;
        background-color: rgb(86,86,86);
        background-image: linear-gradient(bottom, rgb(75,75,75), rgb(86,86,86));
        border-radius: 4px;
        box-shadow : 0 0 10px rgba(0,0,0,0.1), 0 -1.5em 0 rgba(0,0,0,0.1) inset, 0 1px 1px 1px rgba(0,0,0,0.1) inset;
    }
    nav > ul{
        padding: 0 10px;
    }

    nav > ul > li{
        display: inline-block;
        vertical-align: top;
        line-height: 3em;
        width: 100px;
        z-index: 2;
        position: relative;
        border-left: 1px solid #313131;
        box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -1px 0 1px rgba(255, 255, 255, 0.1) inset;
    }
    nav > ul > li:nth-last-child(2){
        border-right: 1px solid #313131;
    }

    nav > ul > li > ul{
        position: absolute;
        left: -1px;
        top: 3em;
        clip: rect(0,0,0,0);
        opacity: 0;
    }

    nav .item{
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        padding-left: 10px;
        white-space: nowrap;
        display: block;
        cursor: pointer;
    }
    nav > ul > li > .item:hover + ul,
    nav > ul > li > ul:hover {
        clip: auto;
        opacity: 1;
    }
    nav > ul > li > ul{
        padding: 0.7em 0px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top: none;
        background-color: rgb(117,189,70);
        background-color: rgba(119,172,48, 0.8);
        background-image: linear-gradient(left, rgba(117, 189, 70, 1), rgba(117,189,70,0.0));
    }

HTML

<nav>
    <ul>
        <li data-section="about-me">
            <a href="#" class="item">About me</a>
            <ul>
                <li><a href="#" class="item">Early years</a></li>
                <li><a href="#" class="item">First works</a></li>
                <li><a href="#" class="item">Today and tomorrow</a></li>
                <li class="cursor"><a href="#" class="item">back</a></li>
            </ul>
        </li>

    </ul>
</nav>

Answer 1

发生的事情是指定类名的css选择器优先于后代选择器。指定此选择器时...

 nav > ul > li > ul > li > a

被这一个覆盖......

nav .item

以及菜单项以白色显示其文本的原因，因为类选择器优先于后代选择器。但是，当您在nav .item声明...

下指定此选择器时

nav > ul > li > ul > li > a.item

您要将类选择器添加到后代，这有效地覆盖了先前指定的nav .item选择器

为什么没有这个＆＃34;＆gt;＆＃34;直接后代css选择器工作

1 个答案: