0

まず、今の私のメニューはこんな感じです。

ここに画像の説明を入力

問題は、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#m_newsよりもdiv#cr div が重要なのはなぜですか?

また、ID を設定するのではなく、最も内側の DIV に CSS を設定するにはどうすればよいですか? つまり、 ここに画像の説明を入力

新しい CSS を#id1の最小のボックスに設定し、他の大きなボックスを変更しないようにするにはどうすればよいですか?

4

1 に答える 1

3

div#cr divより優先順位が高いdiv#m_news。に変更できますdiv#cr div#m_news。

詳細については、次のページを参照してください: CSS でのスタイルの優先順位を理解する: 特異性、継承、およびカスケード。

優先順位が次のように並べられていることがわかります。

  • 要素、擬似要素: 0,0,0,1
  • クラス、擬似クラス、属性: 0,0,1,0
  • ID: 0,1,0,0
  • インライン スタイル: 1,0,0,0

したがって、これによると：

div#cr div0,1,0,2の特異性を持ちdiv#m_news、「のみ」 0,1,0,1 のいずれかを持ちます。

于 2013-02-09T22:26:19.987 に答える