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

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

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

在此处进一步阅读： 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;
}