CSSを使用して擬似クラス：最初の子

Question

私は各メニュー項目にボーダーを残しているが、ボーダーは最初の項目から除外されるようにメニューを設定しようとしています。

サイト：http://www.rogersinternational.com

CSS：

#access { 
background: #414731; 
display: block; 
float: left; 
margin: 0 auto; 
width: 900px; 
height: 42px; 
text-transform: uppercase; 
} 
#access .menu-header, 
div.menu { 
font-size: 13px; 
margin-left: 14px; 
width: 900px; 
} 
#access .menu-header ul, 
div.menu ul { 
list-style: none; 
margin: 0; 
} 
#access .menu-header li, 
div.menu li { 
float: left; 
position: relative; 
} 
#access a { 
color: #a5af86; 
line-height: 38px; 
padding: 0 16px; 
text-decoration: none; 
border-left: 1px solid #5e6549; 
} 
#access a:first-child { border: none } 
#access ul ul { 
box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
display: none; 
position: absolute; 
top: 38px; 
left: 0; 
float: left; 
width: 180px; 
z-index: 99999; 
} 
#access ul ul li { min-width: 180px } 
#access ul ul ul { 
left: 100%; 
top: 0; 
} 
#access ul ul a { 
background: #414731; 
line-height: 1em; 
padding: 10px; 
width: 160px; 
height: auto; 
} 
#access li:hover > a, 
#access ul ul :hover > a { 
background: #414731; 
color: #fff; 
} 

メニュー：

<div class="menu"> 
    <ul> 
     <li><a href="http://www.rogersinternational.com/">Home</a></li> 
     <li><a href="http://www.rogersinternational.com/about">Company Profile</a></li> 
     <li><a href="http://www.rogersinternational.com/products">Products</a></li> 
     <li><a href="http://www.rogersinternational.com/solutions">Solutions</a></li> 
     <li><a href="http://www.rogersinternational.com/photo-gallery">Photo Gallery</a></li> 
     <li><a href="http://www.rogersinternational.com/technical-specs">Technical Specs</a></li> 
     <li><a href="http://www.rogersinternational.com/contact">Contact</a></li> 
    </ul> 
</div> 

私はそれが放火犯で疑似クラスを認識するために得ることができますが、効果は行われません。 。あなたの助けに感謝します。

Answer 1

あなたはまた、あなたの最初の李上のIDを入れることができます：

<li id="first"> 

などのように、あなたのスタイルを編集：

#access #first a { border: none } 

を私はここで、これらの変更を行った： http://jsbin.com/oyafe3

Answer 2

.menu li:first-child a{ 
    border: none!important; 
} 

同じ結果が表示されます：

説明のために

#access .menu li:first-child a{ 
    border: none; 
} 

：

あなたのボーダーはここで定義した境界線は、ここで定義されていないため

#access a { 
    border-left: 1px solid #5E6549; 
    … 
} 

.menu li:first-childが一致しません。

.menu li:first-child aは、#access aの方が高いからです。

だから、を追加することにより、speciftyを増加する必要があります！重要ルール

Answer 3

は、すべての要素に境界線を適用します。その後、最初の子供からそれを削除します。

.menu li { border-left:1px solid black; } 
.menu li:first-child { border-left:none; }