Html 为什么外部CSS文件会覆盖页面样式？

我有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>

肖特菲尔德先生{
宽度：50px；
}

我将“shortField”类指定给输入框，但不应用大小。F12屏幕截图：

---

这是因为main.css文件中的样式比html头中的样式更具体。 如果确实需要覆盖它，请尝试执行以下操作：

.shortfield {width: 50px !important;}

---

你需要学习特殊性

• 最不特定的样式表是您链接的内容（外部文件）

• 它们是您在document

  head

  标记之间声明的样式，比外部样式表更具体

• 最后但并非最不重要的是，内联样式是最具体的

因此，要想超车，请使用

！重要信息

（如果您不知道它的功能和工作原理，请不要使用它）声明或使用更具体的CSS选择器，如下面所示

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

---

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

Inline > Embedded > External

• 内联样式是

  style=”“

  中的任何样式，覆盖从嵌入样式表或外部样式表中指定的任何样式
• 嵌入样式是文档的
  中
  的样式。它们由内联覆盖，但由外部覆盖
• 外部样式写在外部文件中，并由嵌入或内联样式覆盖

我的理论是，您有样式覆盖外部样式表。

第一个选择器的属性是

0-0-1-1

，第二个选择器的属性是

0-0-1-0

，这意味着第一个选择器将覆盖第二个选择器

要覆盖初始选择器，您只需要匹配原始特定性，因为第二个选择器在级联的后面

下面的选择器应该足以覆盖与

输入[type=“text”]

的匹配，我已经列出了

.shortField

两次，这样它将继续匹配在非

输入

元素上使用它的情况

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

另一种选择是：

body .shortField {
    width: 50px;
}

提高选择器的特异性时要非常小心。很容易进入特殊性游戏，在游戏中你会写出一些荒谬的风格，比如：

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

---

尝试使用尽可能最低的特定选择器。

您没有尝试！重要！重要的是在这种情况下的黑客修复。据我所见，这不应该发生。我得再想一想，我无法重现这个问题。朱哈娜，我也不能，不知道为什么..你的解决方案有效，我更喜欢它！重要的。我会记下答案。但我还是不明白为什么。。我知道具体情况。在我的例子中，我尝试在页面上设置相同的阶梯。我猜这是因为我使用类与选择器。@katit甚至样式在选择器方面都是特定的，例如简单地在这里写

a{/*style*/}

可以更具体地写为

a.class{/*style在这里*/}

或者使用父对象来选择子对象，就像

.parent\u class\u name{}

或选择一个特定的第n个子项，该子项将更强大，如

.parent\u class a.class:n类型（1）{}

这里不需要“理论”，第一个选择器比第二个选择器具有更高的特性。