CSS特性问题 - 为什么这个选择器优先？

编辑：CSS特性问题 - 为什么这个选择器优先？

审查我的CSS后，我意识到，我在我的头上有一个巨大的洞，实际的问题是，我没有在bar.css.footer-link:hover定义的color规则简单的事实，所以清楚地应用了来自foo.cssa:hover的颜色规则。 CSS 101.谢天谢地，这是星期五。我显然需要周末。谢谢你的帮助！

我在项目的一些UI上工作时看到了一些有趣的事情，我相信这与我对CSS特性缺乏了解有关。我已经做了一些研究，但仍然无法解决我自己的问题。

无论如何，我有几个定义的样式包含在两个不同的样式表中的锚点元素。为了简单起见，我会称它们为foo.css和bar.css。 foo.css包括在页面bar.css

之前在foo.css有以下规则：

a { 
    color: #0088cc; 
    text-decoration: none; 
} 

a:hover { 
    color: #0088cc; 
}

在bar.css有以下规则：

.footer-link { 
    border: 1px solid transparent; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    color: rgb(150, 150, 150); 
    font-size: 13px; 
    line-height: 18px; 
    margin-right: 6px; 
} 

.footer-link:hover { 
    background-color: rgba(255, 191, 254, 0.8); 
    text-decoration: none; 
}

的HTML标记是：

<a href = "#" class = "footer-link">Cheese is really good</a>

It似乎从foo.css应用hover款式，尽管据我了解，.footer-link:hover具有更高的特异性。正常的锚点风格正在按照我的预期应用。

所以我的问题是：

为什么悬停规则越来越在foo.css即使bar.css应用将在后面的页面，其中包括.footer-link:hover应该比a:hover更高的特异性？

在此先感谢！

Example on jsFiddle

来源

2013-07-26 Alex

您的jsfiddle工作我希望在Firefox的样子，粉红色的背景与悬停的蓝色文本。 CSS样式的定义顺序只有在具有相同的“分数”时才是相关的，在这种情况下，最后是胜利。在你的情况下，'.footer-link：hover'比'a：hover'具有更高的分数，所以你写它们的顺序是不相关的。从你提供的jsfiddle中获得 – Matthew

，bar.css通过foo.css工作 – Keith

按照预期在Chrome中也能正常工作。 –

两种款式都被应用。你是正确的.footer-link:hover比a:hover更具体，但你看到的是两种风格定义的组合。这是级联样式表的层叠部分。

你a和a:hover样式首先应用，那么较高的特异性.footer-link和.footer-link:hover样式之后应用，及其任何明确定义的属性（如background）的覆盖前面的定义。

但是，由于您没有在.footer-link:hover风格中指定链接color，所以它代之以继承a:hover的属性。

这里的特殊性正如它应该的那样工作，你对继承和特异性如何工作只是有点困惑！

来源

2013-07-26 18:04:44 Ennui

多个规则集适用于元素是可能的，也是正常的。首先a:hover适用color，然后.footer-link:hover适用background-color和text-decoration。如果他们有不同的风格，那么.footer-link:hover的风格会赢 - 但没有风格冲突。所以这两个规则集的样式恰好结合在一起。

如果您不希望a:hover的color适用，您应该通过在.footer-link:hover中再次设置color: #0088cc来反转它。

来源

2013-07-26 18:05:07

由选择器设置的属性是不同的，但都匹配，所以它们都被应用。如果bar.css在该块中设置了color属性，则它将覆盖foo.css中的属性，因为类选择器.footer-link:hover（优先级0,0,2,0）比元素选择器a:hover（优先级0,0， 1,1）。这也是你必须做的位置：在bar.css，改变以后块

.footer-link:hover { 

    /* the new line */ 
    color: <whatever should be the color of .footer-link when hovering> 

    background-color: rgba(255, 191, 254, 0.8); 
    text-decoration: none; 
}

（我相信你想在当前形势下rgb(150, 150, 150)。）

来源

2013-07-26 18:05:12 Pietu1998

CSS特性问题 - 为什么这个选择器优先？

回答

相关问题