今天遇到一个问题调试了很久,关于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不在一个外部引用的文件里).
以此为鉴,分享给大家.
时间： 2024-11-08 15:16:05