无法使用#ID修改CSS

Question

首先，我的菜单目前看起来就是这样。

问题是应该看到dsasdf div中的边界线和这个背景。

我目前的HTML代码是：

<div id='cr'>
        <div>
            NEWS
            <div id="m_news">dfadf</div>
        </div>
</div>

#cr：

的CSS

  div#cr{

    /*background-color:#1a0f08;*/
    float:right;
    padding:10px;
    width:260px;
    height:100%;
}
div#cr div{
    background-image:url("../img/bg_post.jpg");
    background-position:0px -5px;
    background-repeat:repeat-x;
    border-radius:2px;
    color:#663b20;
    margin-top:5px;
    height:80px;
    padding:8px;
}
div#cr div:hover{
    border:1px solid #bd8100;
    color:#FFF;
}

#m_news的CSS：

div#m_news{
background-image:url("../img/menu/messages.gif");
border:0;
}

问题是 m_news ID无法修改#cr之前设置的CSS，即使它更像是一般页面修改。 我试过在互联网上搜索这个问题的答案，但据我所知，它有时取决于你的CSS代码的位置，但我尝试改变顺序，它既不工作。

为什么 div＃cr div比 div #m_news 更重要？？

另外，不设置ID，我怎样才能在DIV内部设置CSS？ 我的意思是，

如何将新CSS设置为＃id1 中最小的框，但不修改其他大框？

Answer 1

div#cr div的优先级高于div#m_news。您可以将其更改为div#cr div#m_news。

您可以在此页面上详细了解特异性：Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade。

您可以看到优先顺序如下：

• 元素，伪元素： 0,0,0,1
• Class，Pseudo class，Attribute： 0,0,1,0
• Id： 0,1,0,0
• 内联样式： 1,0,0,0

所以根据这个：

div#cr div具有 0,1,0,2 的特异性，而div#m_news只有＆＃34;只有＆＃34; 0,1,0,1