html - CSS 应用顺序

Question

我有这个 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.

如何更改订单？IE。使“X”的宽度10px而不是100%？

Answer 1

这是因为您在顶部声明中有更多选择器。

如果你这样做，它应该覆盖：

.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

Answer 2

您可以尝试使用!important您要强制执行的规则。例如：

.menuClose {
width:10px !important; 
height:10px !important; 
etc...
}