html - 干扰标签

Answer 1

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

使用子选择器只会选择 #Syllabus: 的直接子代锚#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;
}

Answer 2

@jussinen 说的是对的，您也可以使用其他解决方案，为链接提供具体的类。例如：

HTML

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

CSS

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

#Syllabus a.link-level-one: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;
}

希望这可以帮到你