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和{{1}}的右侧。

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;
}

希望这可以帮到你

<ul>干扰<a> tag</a> </ul>

2 个答案: