今天遇到一個問題調試了很久,關於css的優先級問題.
像常規的id選擇器(#test) > 類選擇器class(.test) > 標簽選擇器input (中間還有一些類型不詳舉了),相比大家都很清楚
這次遇到就是input[type=text] {background:red} 和 類選擇器 .aa{background:black} 的優先級問題(aa是定義在input 的class上).
舉例如下:
<html> <style> input{ background:red; } </style> <body> <style> .aa{ background:black; } </style> <input class='aa' type='text' value=''/> </body> </html>
input顯示結果是什么? 是black.
而以下代碼:
<html> <style> input[type=text] { background:red; } </style> <body> <style> .aa{ background:black; } </style> <input class='aa' type='text' value=''/> </body> </html>
結果則是red了!出乎我的意料之外,根本沒往這方面想,所以調試了好久(因為遇到的2個css不在一個外部引用的文件里).
以此為鑒,分享給大家.