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

我的main.css文件，其中我定义的标准尺寸为输入：为什么页面样式被外部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

来源

2013-05-17 katit

没有你试试！重要的 – underscore

！重要的是在这种情况下的黑客修复。从我所能看到的情况看，这不应该发生。想得更长一点。 –

我无法重现该问题。 http://jsfiddle.net/4h7d4/ – JJJ

您需要了解的特异性...

最不具体的样式表是你什么链接（外部文件）
他们在文档head之间声明的样式标签比外部样式表更具体
最后但并非最不重要的，内嵌样式是最具体的

所以为了过程，使用!important（不要使用它，如果你不知道那是什么，它是如何工作的）声明或使用更具体的CSS选择器如下所示

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

来源

2013-05-17 18:45:56

你的解决方案的工作，我喜欢它比！重要。我会标记为答案。但我仍然不明白为什么..我知道特异性。在我的情况下，我尝试在页面上设置相同的竖框。我想这是因为我使用了class vs选择器.. – katit

@katit即使样式对于选择器也是特定的，例如，简单地写'a {/ * Styles here * /}'可以更具体地写为'a.class {/*样式放在这里* /}'或者使用一个父类来选择像'.parent_class a.class_name {}'这样的孩子，或者选择一个更加强大的特定的第n个孩子，比如'.parent_class a.class：nnth-类型（1）{}' –

-1

这是因为在你的main.css文件的样式比在你的HTML头更具体。如果你真的需要重写它试试这样做：

.shortfield {width: 50px !important;}

来源

2013-05-17 18:45:30 AJStacy

-1

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

Inline > Embedded > External

内联样式是内style=""任何东西，覆盖从嵌入式指定的任何样式或外部样式表。
嵌入式样式是文档的<head>内的<style>中的样式。它们被内联覆盖，但覆盖外部。
外部样式用外部文件编写，并且可以嵌入或内嵌覆盖。

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

来源

2013-05-17 18:59:02 sircapsalot

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

第一个选择器的specificity是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; 
}

尽量用最低的specificty选择，你可能可以。

来源

2013-05-17 18:59:19 zzzzBov

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

回答

相关问题