css - 如何覆盖自定义类中的 css 代码？

Question

我正在处理来自客户的一些 CSS 代码。下面是一些 CSS 代码。

.quick-stats {
    float: left;
    text-align: left;
    width: 100%;

    > h5 {
        color: #fff;
        float: left;                
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.3px;
        line-height: 22px;
        margin:5px 0;
        width: 100%;
        text-transform:uppercase;
    }

    > ul {
        list-style: outside none none;
        margin:0;
        padding:0;

        > li {
            float: left;
            padding: 0 1px;
            width: 33.333%;

我可以像 <div class="quick-stats"> 这样分配类.但是我想改li width通过覆盖 width: 33.333%; 中的样式代码至 width: 50%; .对此有任何建议或指导，我们将不胜感激，谢谢。

Answer 1

如果您只想覆盖一个元素，那么您有两个选择。

要么通过将样式添加到 <li> 来使用内联样式元素本身:

<div class="quick-stats">
  <li style="width: 50%;"></li>
  <li></li>
</div>

或者给元素一个第二类更多specificity :

<div class="quick-stats">
  <li class="wide"></li>
  <li></li>
</div>

.quick-stats > ul > li.wide {
  width: 50%;
}

后一种方法的好处是您可以让多个元素使用新类。

或者，您也可以使用伪类，例如 nth-of-type(n) 以特定元素为目标:

<div class="quick-stats">
  <li></li>
  <li></li>
</div>

.quick-stats > ul > li:nth-of-type(1) {
  width: 50%;
}

使用这三种方法中的任何一种，其他 .quick-stats元素仍将保留其原始 33.333% width .