爲什麼頁面樣式被外部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文件覆蓋？

回答

相關問題