如何覆盖CSS的宽度？

Question

如何覆盖UL的默认宽度？例如：

.tabPage .tabs ul {
    margin: 0;
    padding: 0;
    width:149px !important; 
    margin-top: 10px;
    list-style: none;
}

所以html看起来像这样：

<div class="tabPage">
      <div class="tabs">
         <ul> <li> ... </li> <ul>
      </div>
</div>

现在我想为不同的网页将UL的宽度更改为50像素。

我试过这样的话：

  .TabWidthSmall { width:149px; }

我已将此选择器放在<ul>中，但它无效。

Answer 1

为什么需要!important？ CSS中的规则级联，使用!important暂停此过程。如果您在父ul上设置宽度并在后续子ul上设置另一个宽度 - 假设css选择器正确 - 这将被拾取并将应用于您的元素。

或者，正如@Javad_Amiry所提到的，您也可以使用!important对您的孩子ul覆盖之前的!important，但我会尽量避免使用这么多{{1}因为它是糟糕设计的标志。

Answer 2

尝试：

.tabPage .tabs ul.TabWidthSmall {
    width:50px  !important; /* put new width here */
}