如何创建覆盖另一个CSS样式的CSS样式

Question

我有2种CSS样式，除了一种特定的“宽度”和另一种没有的“宽度”外，它们几乎相同。 如何创建继承另一个CSS样式但覆盖属性的CSS样式？

  .FirstStyle
    {
        margin: 0px 0px 0px 8px;
        position: relative;
        display: inline-block;

        height: 29px;
        width: 5px;

        float: left;
    }


    .SecondStyle
    {
        margin: 0px 0px 0px 8px;
        position: relative;
        display: inline-block;

        height: 29px;

        float: left;
    }

Answer 1

你可以这样尝试

在以上两个类中，宽度未定义

.FirstStyle, .SecondStyle
{
    margin: 0px 0px 0px 8px;
    position: relative;
    display: inline-block;

    height: 29px;
    width: 5px;

    float: left;
}

在这里，您只能为FirstStyle类定义宽度..（无论如何，该类位于其他类之下可能会覆盖上面指定的最终宽度）

.FirtsStyle
{
    width: 5px;
}

Answer 2

如何创建继承另一个CSS样式但覆盖属性的CSS样式？

后续的CSS样式会自动覆盖前面的属性，因此只需在要覆盖的属性下面添加该属性，它将继承除指定的新样式之外的所有内容。

例：

HTML：

<div class="someClass anotherClass">
   ....
</div>

CSS：

.someClass {
    width: 100px;
    color: green;
}
.anotherClass {
    width: 200px; <-- This will override the above values
    color: red;
}
.someClass {
    width: 450px !important; <-- The !important tag will override both suceeding as well as preceeding properties
}
.someClass {
    width: 500px; <-- This will override the first two styling properties
}

Answer 3

您可以计算CSS特异性值

1. 如果元素具有内联样式，则自动赢得（1,0,0,0点）
2. 对于每个ID值，应用0、1、0、0点
3. 对于每个类值（或伪类或属性选择器），应用0,0,1,0点
4. 对于每个元素引用，应用0,0,0,1点

---

笔记

1. 通用选择器（*）没有特定值（0,0,0,0）
2. 伪元素（例如:first-line ）得到0,0,0,1，不同于它们的伪类弟兄得到0,0,1,0
3. 伪类:not()本身:not()添加任何特异性，仅添加括号内的内容。
4. 附加CSS属性值的!important值是自动获胜。 它甚至覆盖了标记中的内联样式。 可以覆盖!important值的唯一方法是使用稍后在CSS中声明的另一个！important规则，否则使用相等或很大的特异性值。 您可以将其添加为特异性值1,0,0,0,0