Question

我理解CSS级联，但是声明样式类的顺序是什么意思？

如果我定义了这样的链接：

<a class="btn may-btn-submit mbtn-tight" href="/en-GB/Buyer/QuotesReceived/" id="red">View item quotes</a>

我希望应用的样式类的顺序如下所示：

btn may-btn-submit mbtn-tight

但事实并非如此。订单实际上也是由样式表文件im链接中的顺序决定的。因此，如果在may-btn-submit之前css文件中列出了mbtn-tight，则任何冲突的样式规则都将被may-btn-submit中的任何内容覆盖。

由于它们具有相同的特异性，我认为我在html中应用它们的顺序实际上意味着什么，但显然它绝对没有意义。这样做：

    .mbtn-tight {
    margin-right: 1px;
    margin-left: 1px;
}

      .may-btn-submit {
        /*padding: 10px 14px;*/
        padding: 6px;
        color: #fff !important;
        border-color: #fE242f;
        background-color: #f45b4f;
        border-top: #f7a099;
        border-right: 1px solid #f45b4f;
        border-bottom: 1px solid #F61E0C;
        border-left: 1px solid #f45b4f;
        text-shadow: 0 -1px 1px #94342D;
        -webkit-background-clip: padding-box;
        background-color: #f45b4f;
        background-image: -o-linear-gradient(#f45b4f, #f45b00);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f45b4f), color-stop(1, #f45b4f));
        background-image: -moz-linear-gradient(center bottom, #f45b4f 0%, #f45b4f 100%);
        -webkit-box-shadow: 0 1px 0 0 #f45b4f inset,0 1px 2px 0 rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 1px 0 0 #f45b4f inset,0 1px 2px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 0 0 #f45b4f inset,0 1px 2px 0 rgba(0, 0, 0, 0.3);
        -o-transition: none 0.3s ease-in-out 0s;
        -webkit-transition: none 0.3s ease-in-out 0s;
        -moz-transition: none 0.3s ease-in-out 0s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 140px;
        margin-left: 2px;
        font-size: 12px;
        margin-left: 15px;
        text-transform: uppercase;
        line-height: 20px;
        height: 32px;
    }

并且margin-left总是15px，无论我在html中如何分配样式规则的顺序如何。然而，如果我在jquery中使用.addClass，我使用addClass应用的样式将覆盖任何现有设置（假设具有相同的特异性），因为它最后应用。

Answer 1

正确，列表中的顺序并不意味着什么。

样式表中的特殊性，顺序以及正在声明的样式表的顺序。

Multiple CSS Classes: Properties Overlapping based on the order defined

Answer 2

正确，CSS类在元素的class属性中出现的顺序没有意义。

有很多方法可以指定您正在寻找多个类的确切行为。无论样式表中的顺序如何，您都可以应用某些样式：

.class1 {
    display:block !important;
}
.class2 {
    display:inline; /* If element has class1, it will be display:block */
}

您可以专门为具有两个类的元素制作CSS规则：

.class1.class2 {
    /* Elements with both classes get these styles */
}

或者，如果您希望在页面不同部分的两个类的元素上使用不同的样式，则可以指定父容器：

#header .class1.class2 {
    /* Elements with both classes inside element with "header" ID */
}

#footer .class1.class2 {
    /* Elements with both classes inside element with "footer" ID */
}

CSS - 忽略多个样式类的顺序

2 个答案: