Question

我试图弄清楚为什么这段代码优先于样式表中的后续代码。

/* Line 612 */
input[type='submit'], input[type='button'], button { 
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
}

以下应该更改边框和背景颜色吗？

/* Line 764 */
.fakelink {
    border: 0px;
    color: blue;
    background-color: transparent;
    margin-top: 0px;
    margin-bottom: 0px;
}

目前边界和背景仍然是线612所描述的。我希望它是764所描述的内容。有没有办法覆盖612而不改变它？

Answer 1

更具体的选择器始终具有优先权，无论天气如何高于或低于同一元素的其他规则。在您的情况下，类型属性被视为比类更具体的选择器，因此它具有优先权。

进一步阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可以通过对需要优先级的规则使用相同级别的特异性来解决此问题。在你的情况下，这样的事情应该有效：

input[type='submit'].fakelink{ ... }

Answer 2

您可以使用!important：

.fakelink {
    border: 0px !important;
    color: blue !important;
    background-color: transparent !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

较低行号的代码优先于较高行的代码。为什么？

2 个答案: