3

我有 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截图：

在此处输入图像描述

4

4 回答 4

3

第一个选择器的特异性0-0-1-1是 ，第二个选择器的特异性是0-0-1-0，这意味着第一个选择器将覆盖第二个。

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

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

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

另一种选择是：

body .shortField {
    width: 50px;
}

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

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

尽量使用最低特异性选择器。

于 2013-05-17T18:59:19.080 回答
2

你需要了解特异性...

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

  • 您在文档head标签之间声明的样式比外部样式表更具体

  • 最后但并非最不重要的一点是，内联样式是最特定的

因此，为了超越，请使用!important（如果您不知道它的作用和工作原理，请不要使用它）声明或使用更具体的 CSS 选择器，如下面的一个

input[type=text].shortField {    /* This is more specific than simple element selector */
    /* Styles */ 
}
于 2013-05-17T18:45:56.350 回答
-1

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

.shortfield {width: 50px !important;}
于 2013-05-17T18:45:30.583 回答
-1

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

Inline > Embedded > External
  • 内联样式是内嵌样式style=""或外部样式表中指定的任何样式，并覆盖任何样式。
  • <style>嵌入样式是<head>文档中的样式。它们被内联覆盖，但覆盖外部。
  • 外部样式写在外部文件中，并被嵌入或内联覆盖。

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

于 2013-05-17T18:59:02.447 回答