html - <ul> 干扰 <a> 标签

Question

这是我的 HTML 结构:

<div id="Syllabus" class="syl">
    <a href="#">
    </a>
    <ul class="ul_menu">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
    </ul>
</div>

这是我的 CSS:

#Syllabus a {
    position:          absolute;
    top:               0px;
    left:              130px;
    width:             112px;
    height:            40px;
    background-image:  url(/Assets/Syb_but.png);
    background-repeat: no-repeat;
}

#Syllabus a:hover {
    background-image: url(/Assets/QuesPap_but_ul.png);
}

.ul_menu {
    position: relative;
    top:      44px;
    left:     43px;
    display:  none;
}

ul, li {
    margin:  auto;
    padding: 0;
}

当我在任何浏览器中查看此代码时，background-image: url(/Assets/Syb_but.png);每次由 <li> 生成标签。即 sym_but.png出现在 link1 的右侧和 link2连同第一个。

Answer 1

#Syllabus a 是后代选择器。这意味着该规则适用于#Syllabus 的所有后代 anchor 。

使用子选择器将仅选择作为#Syllabus 的直接子代的 anchor :#Syllabus > a。

#Syllabus > a {
    position:          absolute;
    top:               0px;
    left:              130px;
    width:             112px;
    height:            40px;
    background-image:  url(/Assets/Syb_but.png);
    background-repeat: no-repeat;
}

#Syllabus > a:hover {
    background-image: url(/Assets/QuesPap_but_ul.png);
}

.ul_menu {
    position: relative;
    top:      44px;
    left:     43px;
    display:  none;
}

ul, li {
    margin:  auto;
    padding: 0;
}