爲什麼CSS忽略特定列表元素的這些樣式？

Question

我有一個非常直接的導航菜單，我試圖對一個項目的樣式與其他項目不同。但是，只應用背景，而邊框半徑和鏈接顏色等其他內容則不適用。

這是菜單：

<div class="menu"> 
    <ul> 
     <li><a href="page1.php">Page1</a></li> 
     <li><a href="page2.php">Page2 </a></li> 
     <li><a href="page3.php">Page3 </a></li> 
     <li class="extranav"><a href="extra.php">Extra</a></li> 
    </ul> 
</div> 

這些都是通用的菜單列表樣式：

.menu ul{ margin:0px; padding:0px;} 
.menu ul li{ float:left; background:url(../images/sprator.png) right top no-repeat; padding-right:1px;} 
.menu ul li a{display:block; padding:0px 23px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:46px; text-decoration:none; text-transform:uppercase;} 
.menu ul li a:hover{ display:block;background: #b04141; /* Old browsers */ 
background: -moz-linear-gradient(top, #b04141 0%, #c35151 39%, #c35151 62%, #c35151 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b04141), color-stop(39%,#c35151), color-stop(62%,#c35151), color-stop(100%,#c35151)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* IE10+ */ 
background: linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b04141', endColorstr='#c35151',GradientType=0); /* IE6-9 */} 

而這正是我想要申請到額外的導航元素：

.extranav a{ 
    height:46px; 
    color:#FF0000; 
    line-height:46px; 
    display:block; 
    background: #206818; /* Old browsers */ 
    background: -moz-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#024A00), color-stop(39%,#206818), color-stop(62%,#347C2C), color-stop(100%,#3E8636)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #024A00 0%,#206818 39%,#347C2C 62%,#3E8636 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* IE10+ */ 
    background: linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#024A00', endColorstr='#3E8636',GradientType=0); /* IE6-9 */} 
    -moz-border-radius: 0px 0px 10px 0px; 
     -webkit-border-radius:0px 0px 10px 0px; 
     -khtml-border-radius: 0px 0px 10px 0px; 
     border-radius:0px 0px 10px 0px; 
} 

正確應用背景屬性，而鏈接顏色和邊框半徑等其他內容則不適用。爲什麼會發生這種情況，我該如何解決？

小提琴：http://jsfiddle.net/68Vb6/

Answer 1

圓角半徑不是風格的一部分，你有一個}在它之前結束樣式塊。

改變這一行：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#024A00', endColorstr='#3E8636',GradientType=0); /* IE6-9 */} 

到：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#024A00', endColorstr='#3E8636',GradientType=0); /* IE6-9 */ 

的.menu ul li a選擇比.extranav a選擇更具體的，所以在第一個規則的設置將優先。將選擇器更改爲.menu ul li.extranav a以使其更具體。