Question

在菜单中，我将最后一个孩子的声明应用于{ border: none;}。之后我的SUBmenu即使声明也没有显示边框：{border-bottom: 1px solid black;}我的第二个声明无效的任何想法？ FIDDLE

P.S我想通了当我改变ul.topmenu ....到ul .... everthing工作完美。但我仍然需要有能力使用我的班级名称。

＆＃13;

/************QUESTION ZONE**************/

ul li a {
    border-bottom: 1px solid black;
}

ul.topmenu li:last-child a {
    border: none;
}

ul.secondsubmenu li a {
    border-bottom: 1px solid black;
}

/**********end question********/

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    height: 2em;
    background: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    line-height: 2em;   
    width: 6em;
    text-align: center;
}

ul.submenu, ul.secondsubmenu {
    height: auto;
}

ul.submenu li {
    float: none;
}

ul.secondsubmenu {
    background: yellow;
    color: white;
    height: auto;
    position: absolute;
    left: 12.6em;
    top: 6.9em;
    margin-left: 1px;
}

＆＃13;

<nav>
    <ul class="topmenu">
        <li><a href="#">!</a>
        <li><a href="#">!!</a>
            <ul class="submenu">
                <li><a href="#">111</a>
                <li><a href="#">222</a>
                <li><a href="#">333</a>
                    <ul class="secondsubmenu">
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">222</a>
    </ul>
</nav>

＆＃13;

Answer 1

更改此

ul.topmenu li:last-child a {
    border: none;
}

到这个

ul.topmenu > li:last-child a {
    border: none;
}

添加此符号时＆gt;它只意味着第一个孩子的

example

Answer 2

因为ul.topmenu li:last-child a更具体，并且子规则中的所有a代码（属于最后li 的）都符合此规则

将您的第二条规则更改为

ul.topmenu .secondsubmenu li a { border-bottom: 1px solid black; }

将这两条规则放在http://specificity.keegan.st/中以了解它们的特殊性。

：last-child border影响子菜单

2 个答案: