CSS選擇的標籤高於類

<html> 
<head> 
    <style> 
     input[type='text'], select { 
      background: blue 
     } 

     .error { 
      background: red 
     } 
    </style> 
</head> 
<body> 
<input type="text" class="error"/> 
<select class="error"> 
    <option>non-sense</option> 
</select> 
</body> 
</html>

如果類.error背景紅色比它必須是紅色。即使input[type="text"]有藍色背景。在IE和GC進行測試。CSS選擇的標籤高於類

來源

2012-10-29 ortreum

使用.error { background: red !important }

要知道這有侷限性的，請參閱：!important rules (CSS 2.1 Section 6.4.2)

來源

2012-10-29 11:53:49 Caelea

使用'！important'如此輕率地將你的代碼從長遠來看，一個真正的頭痛。謹防！ –

'！important'？真？ –

@MadaraUchiha所以不會在單獨的文件中攪動你的CSS。我試圖解決他的問題，而不是學習他如何正確編碼他的整個網站 – Caelea

的理由讓你所看到的問題是，input[type=text]比.error更具體的，所以它會覆蓋它。使用更具體的選擇：

input.error

或者，如果你想真正安全：

input[type=text].error

另一種方法是保持當前選擇器，但在規則上添加!important關鍵字：

.error { background: red !important; }

這會立即使其覆蓋與元素匹配的任何其他規則。請注意，這是一個非常強大的工具，可能會在未來導致意想不到的結果。

來源

2012-10-29 11:55:00

那麼現在基於我的回答你提高了你自己？壞！ – Caelea

如果他在任何數量的標籤上使用'.error'，或者使用未知標籤？ – kontur

您可以通過引用CSS特性來改進答案，以便OP可以獲得有關此上下文中「更具體」的一些線索。 – eis

試試這個

<html> 
    <head> 
     <style> 

      input[type='text'], select { background: blue } 
      .error { background: red; } 
      input.error { background: red; } 

     </style> 
    </head> 
    <body> 
     <input type="text" class="error" /> 
     <select class="error"> 
      <option>non-sense</option> 
     </select> 
    </body> 
</html>

來源

2012-10-29 12:07:34 user1780324

工作。但不用說：css是一個噩夢，如果你不知道它的每一個它不是一個錯誤它的一個特徵功能D： – ortreum

CSS選擇的標籤高於類

回答

相關問題