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。

Answer 2

三个选项：

第一个简单的解决方案就是使用内联样式
您可以将其嵌套在另一个类名中以覆盖它。
通过元素的类名来定位元素本身。（在某些情况下，您也可以将其标记为重要。）

如何在自定义类中覆盖CSS代码？

2 个答案: