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

これがあなたを助けることを願っています