4

私はこのCSSを持っています

.menuPopup div {
    width: 100%;        
    padding: 5px;
}

.menuClose {
    width:10px; 
    height:10px; 
    padding:0px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    cursor:pointer;
}

この HTML に当てはまるもの:

<div class="menuPopup">
    <div >A</div>
    <div >B</div>
    <div >C</div>
    <div class="menuClose">X</div>
</div>

適用されると、.menuPopup div宣言は常にオーバーライドされます.menuClose。

どうすれば注文を変更できますか? すなわち。10px代わりに「X」の幅を作る100%？

4

2 に答える 2

8

これは、最上位の宣言にさらに多くのセレクターがあるためです。

これを行うと、上書きする必要があります：

.menuPopup div.menuClose {
    width:10px; 
    height:10px; 
    padding:0px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    cursor:pointer;
}

css カスケードの優先度の処理方法については、この記事を参照してください: http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html

于 2012-11-13T00:31:50.140 に答える
1

!important適用したいルールに使用してみることができます。例えば：

.menuClose {
width:10px !important; 
height:10px !important; 
etc...
}
于 2012-11-13T00:32:32.680 に答える