ulリストのCSSに問題があります

Question

私のulリストの最後のliを境界線を表示しないようにしようとしています。私は他のすべての間に境界線が必要です。私はちょうど私のリストの間に分割線として小さな線をしたい。ここに私のコードは次のとおりです。

CSS

#navcontainer ul li { 
     display: inline; 
     border-right:1px solid #5C5C5C; 
     margin-left: -12px; 
    } 
    #navcontainer ul .last li{ 
     display: inline; 
     border-right:0; 
     margin-left: -12px; 
    } 

    #navcontainer ul li a{ 
     text-decoration: none; 
     padding: .2em 1em; 
     color: #5C5C5C; 
    } 

HTML

<ul class="qa-list"> 
    <li> 
     <a href="#rewards" title="Rewards">Rewards Questions</a> 
    </li> 
    <li> 
     <a href="#logging" title="Logging In">Logging In Questions</a> 
    </li> 
    <li> 
     <a href="#uploading" title="Uploading Photo">Uploading Photo Questions</a> 
    </li> 
    <li> 
     <a href="#enter" title="Entering Supporter Email">Entering Supporter Email Questions</a> 
    </li> 
    <li> 
     <a href="#fb" title="Sharing on Facebook">Sharing on Facebook Questions</a> 
    </li> 
    <li> 
     <a href="#letter" title="Printing Donation Letter">Printing Donation Letter Questions</a> 
    </li> 
    <li> 
     <a href="#tracking" title="Tracking Donations">Tracking Donations Questions</a> 
    </li> 
    <li> 
     <a href="#privacy" title="Privacy">Privacy Questions</a> 
    </li> 
    <li> 
     <a href="#gift" title="Supporter "Thank You" Gift">Supporter "Thank You" Gift Questions</a> 
    </li> 
    <li> 
     <a href="#rog" title="About Reaching Our Goal">About Reaching Our Goal Questions</a> 
    </li> 
    <li> 
     <a href="#contact" title="Contact Information Questions">Contact Information Questions</a> 
    </li> 
</ul> 

誰でも助けることができますか？ありがとう！

Answer 1

は.lastのためにこれを試してください：あなたはli要素のいずれにも適用.lastクラスを持っているよう

border-right: none; 

また、それは見ていません。さらに、適用する場合は、.last liではなく、li.lastとなるようにセレクタを変更する必要があります。

CSS：

#navcontainer ul li.last 
{ 
    ... 
    border-right: none; 
    ... 
} 

リスト項目：

<li class="last"> 
    <a href="#contact" title="Contact Information Questions">Contact Information Questions</a> 
</li> 

Answer 2

これを試してみてください：

#navcontainer ul:last-child { 
    border-right: 0px; 
} 

Answer 3

はこれを試してみてください。

#navcontainer ul li:last-child{ 
    display: inline; 
    border-right:none; 
    margin-left: -12px; 
} 

Answer 4

CSS3セレクタ：last-childを使用してターゲティングできます。

http://www.w3schools.com/cssref/sel_last-child.asp

#navcontainer ul li:last-child { 
/* CSS here */ 
}