风格将不适用于列出

我有以下结构的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

风格将不适用于列出

回答

相关问题