Question

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

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

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

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

Answer 1

.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 */
}

Answer 2

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

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

Answer 3

.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/）。

风格不适用于列表

3 个答案: