無法覆蓋件

的CSS我有一個包含局部模板的全局模板網站，但現在我只能堅持一個簡單的CSS問題：無法覆蓋件

HTML

<div id="context"> <!-- this is part of global template --> 
    <!-- this is rendered by partial template --> 
    <select id="test"> 
     <option>[Select a value]</option> 
    </select> 
</div>

全球CSS

在全局樣式表中，定義了#context中所有<select>元素的默認寬度：

div#context select 
{ 
    width: 500px; 
}

部分CSS

現在的部分模板（這使得內#context內容），我需要重寫的<select>默認寬度。我認爲這將如此簡單：

select#test 
{ 
    width: 150px; 
}

但我錯了，它不起作用。我想這是因爲CSS認爲div#context select是元素更好的匹配，因爲當我改變了局部模板的CSS像這樣工作的：

div#context select#test 
{ 
    width: 150px; 
}

當然，這不是我想做的事，因爲部分模板不應該知道它在全局模板內呈現在哪個節點中。

有關如何在不指定全局模板中的元素的情況下重寫部分模板樣式的任何想法？

見jsFiddle

來源

2013-08-25 Wouter Huysentruit

也許會拋出'！important'來克服這種情況？ –

嘗試內聯風格 – tjons

這是足以讓你的選擇只是有點強：

body select#test 
{ 
    width: 150px; 
}

例子：http://jsfiddle.net/XvZSz/2/

從W3 - CSS Selectors：

一個選擇的特異性的計算方法如下：

co （= a）

計算選擇器中類選擇器，屬性選擇器和僞類的數量（= b）

計數類型選擇器和僞元素的數量在選擇器（= C）

[...]

串接三個數A | b | C（在具有大基數的數字系統）給出的特異性。

所以，div#context select是1個ID和2組的元素：0 | 1 | 2
但：select#test是1個ID和1個元件（0 | 1 | 1） - 沒有那麼強。

更多信息：

來源

2013-08-25 11:06:52 Kobi

就是這樣，比重要更好。儘管如此，仍然很醜。也許OP應該重構他的CSS並刪除'div＃context select' –

好，因爲在我的部分模板中沒有''元素，所以我不想在部分CSS中使用它。 –

@Wouter - CSS不適用於模板，它應用於頁面。但是，這仍然只是一個例子：**任何**更改都會執行：例如，您可以添加一個類。 – Kobi

試試這個：

select#test 
{ 
    width: 150px !important; 
}

具有重要屬性將始終被應用無論在哪裏該規則出現在CSS文件中的規則！因此，如果您想確保始終應用某個媒體資源，那麼您必須將！重要的媒體資源添加到該標記。

來源

2013-08-25 11:06:41

所以似乎有很多來源爲什麼我不應該使用'！important'。因此，我認爲我會堅持使用Kobi的解決方案，並嘗試使部分CSS更強一點。 –

重要將覆蓋任何風格！

select#test 
{ 
    width: 150px !important; 
}

來源

2013-08-25 11:08:35

!important將覆蓋你的CSS

select#test 
{ 
    width: 150px !important; 
}

demo

如果你的全局CSS有!important

然後，你可以調用body select#test{/*call your css*/}

來源

2013-08-25 11:12:23

這不是「更好匹配」的規則具有較高的特異性值請檢查該link

我會建議避免使用！重要你可以閱讀一下here。以下幾大亮點，爲什麼不使用重要：

1.Encourages馬虎，深思熟慮的不好的代碼

2.Creates代碼，少維護

3。覆蓋用戶樣式表中聲明的樣式，從而降低可訪問性

來源

2013-08-25 11:15:22 Tomzan

回答

相關問題