Question

我有main.css文件，我在其中定义输入的标准大小：

/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
    width: 180px;
    border: 1px solid #aaa;
}

这个CSS在页面标题中引用。稍后在页面中我定义了以下内容：

<style>
        .shortField {
            width: 50px;
        }

    </style>

我将“shortField”类分配给输入框，但未应用大小。 F12截图：

enter image description here

Answer 1

第一个选择器的specificity为0-0-1-1，第二个选择器的具体情况为0-0-1-0，这意味着第一个选择器将覆盖第二个选择器。

要覆盖初始选择器，您只需要匹配原始特异性，因为第二个选择器稍后在级联中。

以下选择器应足以覆盖与input[type="text"]的匹配，我已列出.shortField两次，以便它继续匹配在非input上使用的情况} elements。

.shortField,
input.shortField {
    width: 50px;
}

另一种选择是：

body .shortField {
    width: 50px;
}

在提高选择者的特异性时要非常小心。很容易进入特殊性游戏，你最终会写出无意义的风格，如：

#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
    margin-left: 0 !important;
}

尝试使用您可能的最低特异性选择器。

Answer 2

你需要了解特异性......

所以为了过度骑行，请使用!important（如果您不知道它的作用及其工作方式，请不要使用它）声明或使用更具体的CSS选择器，如下所示

input[type=text].shortField {    /* This is more specific than simple element selector */
    /* Styles */ 
}

Answer 3

这是因为main.css文件中的样式比html头中的样式更具体。如果你真的需要覆盖它，请尝试这样做：

.shortfield {width: 50px !important;}

Answer 4

可能会帮助您理解CSS的重要性层次结构。

Inline > Embedded > External

我的理论是你的样式会覆盖外部样式表。