Question

我遇到了让我困惑的场景 - :last-child的使用会影响父类的应用方式。

我所拥有的是元素列表，目标是将一些样式应用于最后一个元素。

但是，当我使用:last-child时，样式的优先级会发生变化，其中一个父类停止工作，只有!important可以解决问题。

我在这里做了一个简单的演示： http://jsfiddle.net/wC2AX/1/

HTML：

<div class="hover">
    <div class="focus_on_last_child" style="background-color:red; width:100px;  height:100px">
        <div class="attribution">

        </div>
    </div>
</div>

CSS：

/*this should be applied on hover always*/
.hover:hover .attribution{
        background-color: black; /*try adding !important*/
        bottom: 0px;

}

/*basic properties*/
.attribution {
    height: 60px;
    overflow: hidden;
    position: absolute;
    bottom: -60px;
    width: 100px;
}

/*depending on a screen size styles are changed*/
.focus_on_last_child:last-child .attribution { /*try removing :last:child*/
    background-color: pink;
    bottom: -30px;
}

这个例子有点愚蠢，想法是应该改变悬停样式。但只有在使用!important或删除:last-child时才有效。

感谢您的任何建议!!

Answer 1

这是选择器specificity的问题。

你的第一个规则有两个类和一个伪类：

.hover:hover .attribution

你的最后一条规则也有两个类和一个伪类（:last-child是伪类）：

.focus_on_last_child:last-child .attribution

由于您的两个规则具有同等特定性，因此稍后出现的规则优先。删除:last-child伪类时，只保留两个类选择器，因此减少了该规则的特异性，从而使:hover规则优先。

最简单的解决方案是将:hover规则移至:last-child规则下方，以便该规则优先，您不必使用!important。

Answer 2

因为：

.hover:hover .attribution{

比具体而言：

.focus_on_last_child .attribution {

但是如果你要添加.hover，它会更具体，并且会有效：

.hover .focus_on_last_child .attribution {

为什么'：last-child'改变了样式的优先级？

2 个答案: