CSS继承问题

Question

我有一个旧的 css 行优先于我的新 <img> ID CSS 如何覆盖它？

我想在灰色条内更改图像的宽度，但无法使用新 ID 更改图像宽度。

这是我的代码:

#greybar img {
    width: 75px;
    float: left;
    margin: 10px;  
}    

#rpmimage { 
    width: 125px;
}

Answer 1

您需要查找 CSS 特异性。简而言之，不同的选择器会得到不同的分数。

ID 值 100，Class 值 10，标签选择器值 1。

这意味着 #greybar img 值 101，而 #rpmimage 值 100。因此，第一个“获胜”。

许多人建议不要为 CSS 使用 ID，也不要在需要帮助的地方过度限定选择器。

在你的情况下，试试 #rpmimage img，或者重新考虑你正在用这些新知识做什么!

有很多“坏事”要做，包括使用内联样式(就像你下次遇到问题时你会记得你做过的一样!)，或使用 !important。 !important 的事情是它优先于一切，这意味着下次你遇到这个问题时你无处可去。

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/是一篇很棒的文章，其中有一些很好的实践，真的值得每个人阅读!

要获得一个很好的工具来帮助理解更复杂的选择器，请尝试 http://specificity.keegan.st/ - 这让您可以测试诸如 #id:after p > img 之类的东西，看看它们有什么特殊性。