風格將不適用於列出

我有以下結構的HTML：風格將不適用於列出

<div class="property-desc clearfix"> 
     <div class="left"> 
      <ul class="prop-iconlist"> 
       <li class="pdf"><a href="#">Milk</a></li> 
       <li class="text"><a href="#">Eggs</a></li> 
       <li class="htm"><a href="#">Cheese</a></li> 
       <li class="doc"><a href="#">Vegetables</a></li> 
       <li class="text"><a href="#">Fruit</a></li> 
      </ul> 
     </div> 
    </div>

我想應用樣式的標籤列表中的項目：

.prop-iconlist li a { 
text-decoration: none; 
font-size: 12px; 
color: 
#676767; 
}

但不知何故，property-desc .left的風格似乎適用於它。

.property-desc .left a { 
font-weight: bold; 
color: 
#5473ba; 
padding: 0; 
margin: 0; 
font-weight: 12px; 
text-decoration: none; 
}

我該如何將我想要的樣式應用到列表項中？任何幫助深表感謝。

來源

2013-03-05 user1038814

.property-desc .left a比.prop-iconlist li a更具體。最好的方法可能會使.property-desc .left a不太具體，或將其更改爲.property-desc .left > a或其他。這取決於實際情況。

如果該規則是絕對不能用的理由，你總是可以作出這樣的覆蓋覆蓋的（喘氣）特殊情況：

.property-desc .prop-iconlist li a { 
    /* Repeat some things here */ 
}

來源

2013-03-05 00:38:25 Ryan

您需要在選擇特異性讀了。在確定應用哪種樣式規則時，基本上不同類型的選擇器具有較高的權重。在這種情況下，一類選擇具有比元素選擇一個更高的權重，因此其使用2類選擇您的第二條規則將覆蓋第一僅具有1

來源

2013-03-05 00:40:31

這解釋了爲什麼，但沒有解釋如何。爲了解決這個問題，就是這樣。 – Ryan 2013-03-05 00:43:48

是的。但是，一旦你明白了爲什麼，就會明白這一點 - 然後你將擁有克服將來類似問題的必要知識。 – 2013-03-05 00:49:00

.prop-iconlist li a，這個選擇是小於特定.property-desc .left a。結果是第一個選擇器不工作。

要解決此問題，可以使第一個選擇器比最後一個更具體，或使最後一個選擇器比第一個選擇器更具體。無論哪種方式將工作得很好。

.left .prop-iconlist li a（更具體的第一選擇比.property-desc .left a，所以它會工作）

.left a（少特定的最後選擇比.prop-iconlist li a，所以這個選擇不會工作，第一選擇將工作）

可以谷歌關於CSS選擇器的特異性和學習更多關於這個話題。並檢查哪個選擇器更具體可以訪問此網站（http://specificity.keegan.st/）。

來源

2013-03-05 07:17:39

風格將不適用於列出

回答

相關問題