html - 面包屑突出显示额外的元素为什么？

Question

我的面包屑高亮显示 >> 当我点击 时。我知道某处我的代码有误，但我不明白问题出在哪里？这是我的代码:

<div class="bgbrcrmb ">
    <div class="breadcrumb clearfix">
        <ul class="breadc">
            <li ><a class="you-are-here" href="#" >You Are Here</a></li>
            <li><a class="home"href="#">Home</a></li>
            <li><a class="grandparent" href="#">Grand Parent</a></li>
            <li><a class="parent" href="#">Parent</a></li>
            <li class="active"><a href="#" class="child">Child</a></li>
        </ul>
    </div>
</div>

CSS:

.breadcrumb{
    border-bottom: 1px solid gray;
    margin-top:0px;
    list-style:none; 
    background-color:#333;
}
.breadcrumb li {
    display:inline-block;
    list-style:none ;
}
.breadcrumb li + li :before{
    font-size: 9px; 
    color: #FFFFFF; 
    text-decoration: none ;
    content:">>"; 
}
.breadcrumb :hover{
    color:#FFFF00;
    text-decoration:underline; 
}

Answer 1

试试这个

CSS

.breadcrumb{
border-bottom: 1px solid gray;
margin-top:0px;
list-style:none; 
background-color:#333;

}
.breadcrumb li {
display:inline-block;
list-style:none ;

}
.breadcrumb li :before{
font-size: 9px; 
color: #FFFFFF; 
content:">>"; 
}
.breadcrumb li :hover{
color:#FFFF00;
}