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

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

您可以使用 !important:

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

Answer 2

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

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

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

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

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

Code on lower line number is taking priority over code on a higher line. Why?

css

css-selectors

css-specificity