Html 为什么'；：最后一个孩子'；更改样式的优先级？

我遇到了一个让我困惑的场景，

：last child

的使用会影响父类的应用

我有一个元素列表，目标是对最后一个元素应用一些样式

但是，当我使用

：last child

时，样式的优先级会发生变化，其中一个父类停止工作，只有

！重要信息

修复了该问题

我在这里做了一个简单的演示：

HTML:

这个例子有点愚蠢，想法是悬停样式应该改变。但只有当

中的任何一个！重要信息

已使用或

：最后一个子项

已删除

---

谢谢你的建议

这是选择器的问题

第一条规则有两个类和一个伪类：

.hover:hover .attribution

.focus_on_last_child:last-child .attribution

您的最后一条规则也有两个类和一个伪类（

：最后一个子类是该伪类）：

因为你的两条规则同样具体，所以后面的规则将优先。删除
：last child
伪类时，只保留两个类选择器，因此该规则的特定性降低，从而使
：hover
规则优先

最简单的解决方案是将
：hover
规则移动到
：最后一个子
规则下方，这样该规则优先，您就不必使用
！重要信息
这是选择器的问题

第一条规则有两个类和一个伪类：

.hover:hover .attribution

.focus_on_last_child:last-child .attribution

您的最后一条规则也有两个类和一个伪类（
：最后一个子类是该伪类）：

因为你的两条规则同样具体，所以后面的规则将优先。删除
：last child
伪类时，只保留两个类选择器，因此该规则的特定性降低，从而使
：hover
规则优先

最简单的解决方案是将
：hover
规则移动到
：最后一个子
规则下方，这样该规则优先，您就不必使用
！重要的
这是因为：

.hover:hover .attribution{

比以下内容更具体：

.focus_on_last_child .attribution {

但是，如果您将
.hover
添加到它，它将更加具体，并且将起作用：

.hover .focus_on_last_child .attribution {

这是因为：

.hover:hover .attribution{

比以下内容更具体：

.focus_on_last_child .attribution {

但是，如果您将
.hover
添加到它，它将更加具体，并且将起作用：

.hover .focus_on_last_child .attribution {

我也注意到了。但是当我读到你已经回答的问题时…请告诉我，我也不认为@Anelook实际上需要最后一个孩子选择器，如果html如上所述，我不认为在
：最后一个孩子
下面添加
：hover
是必要的。你根本不需要
：last child
，拜托，我不想对OP的实际代码@Pete和rednaw做太多假设，这就是我为什么把
：last child
留在那里的原因。我也注意到了这一点。但是当我读到你已经回答的问题时…请告诉我，我也不认为@Anelook实际上需要最后一个孩子选择器，如果html如上所述，我不认为在
：最后一个孩子
下面添加
：hover
是必要的。你根本不需要
：last child
，拜托，我不想对OP的实际代码@Pete和rednaw做太多假设，这就是我为什么把
：last child
留在那里的原因。