0

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

我正在尝试将样式应用于列表项中的 a 标签：

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

但不知何故，a of property-desc .left 的样式似乎适用于它。

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

我如何将我想要的样式应用于列表项中的 a？任何帮助深表感谢。

4

3 回答 3

3

.prop-iconlist li a, 这个选择器不如.property-desc .left a. 结果，第一个选择器不起作用。

要解决此问题，您可以使第一个选择器比最后一个选择器更具体，或者使最后一个选择器比第一个选择器更不具体。无论哪种方式都可以正常工作。

.left .prop-iconlist li a（比 更具体的第一个选择器.property-desc .left a，所以它会起作用）

.left a（最后一个选择器不如.prop-iconlist li a，所以这个选择器不起作用，第一个选择器会起作用）

您可以在 google 上搜索 css-selector-specificity 并了解有关此主题的更多信息。要检查哪个选择器更具体，您可以访问此站点（http://specificity.keegan.st/）。

于 2013-03-05T07:17:39.640 回答
2

.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-05T00:38:25.430 回答
2

您需要阅读选择器特异性。在确定应用哪些样式规则时，基本上不同类型的选择器具有更高的权重。在这种情况下，类选择器比元素选择器具有更高的权重，因此使用 2 个类选择器的第二个规则会覆盖只有 1 个的第一个规则。

http://www.w3.org/TR/CSS2/cascade.html#specificity

于 2013-03-05T00:40:31.933 回答