ul li 마지막 자식 반경이 작동하지 않습니다.

Question

오른쪽에 둥근 모서리가있는 마지막 목록 항목을 원하지만 작동하지 않습니다. 내 자신에 의해 그것을 알아낼 수 없어, 모든 것을 시도하고 모든 곳에서 수색.

#navigation { 
 
    float: left; 
 
    border: 1px solid #C0C0C0; 
 
    border-radius: 20px; 
 
    background: linear-gradient(#64717E, #E5E3DE); 
 
    box-shadow: 2px 2px 15px #64717E inset, 0 0 20px #000; 
 
} 
 
#navigation ul { 
 
    height: 20px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#navigation ul li { 
 
    padding: 0 15px 0 15px; 
 
    display: inline; 
 
    // \t \t border: 2px solid #C0C0C0; 
 
    background: linear-gradient(#64717E, #C0C0C0, #64717E); 
 
    list-style-type: none; 
 
} 
 
#navigation ul li:first-child { 
 
    border-top-left-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
} 
 
#navigation ul li:last-child { 
 
    border-top-right-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
}

<div id="navigation"> 
 
    <ul> 
 
    <li><a href="#">start<a></li> 
 
\t <li><a href="#">imperdiet<a></li> 
 
\t <li><a href="#">condimentum<a></li> 
 
\t <li><a href="#">nunc<a></li> 
 
\t <li><a href="#">phasellus<a></li> 
 
    </ul> 
 
</div>

되는 HTML 및 CSS 나머지로서

피드백이 이해된다.

Answer 1

<a> 태그를 닫지 않아서 유효한 태그가 아닌 <a> 태그가 열려있는 것이 문제입니다. 첫 번째 아이가 존재하고 유효하지 않습니다,하지만 그때 <a> 태그가 닫히지 않습니다, 그래서 브라우저가 혼동됩니다, 결코 ㄱ last-child가 어디 있는지 알고 있기 때문에

이, 당신의 ul li:first-child 작품을 의미한다.

<a> 태그를 닫으십시오.

<div id="navigation"> 
    <ul> 
     <li><a href="#">start</a></li> 
     <li><a href="#">imperdiet</a></li> 
     <li><a href="#">condimentum</a></li> 
     <li><a href="#">nunc</a></li> 
     <li><a href="#">phasellus</a></li> 
    </ul> 
</div> 

JSFiddle example