CSS选择器的顺序问题
学前端时关于CSS选择器的问题经常令新手苦恼,这里记下常用的三种选择器的顺序问题。
常用的三种选择器:
- 标签选择器(Type)
- Id选择器(Id)
- 类选择器(Class)
Cascading算法:
重要性importance:Id>Class>Type, ICT
/*I-C-T: 0-0-1*/
a {
text-decoration: none;
color:blue;
}
/*I-C-T: 0-1-0*/
.warning{
color: yellow;
}
/*I-C-T: 0-1-0*/
.emtext {
color: red;
}
如上代码当修饰同一字体时根据不同的ICT权重大小来判断优先级 .warning = .emtext>a, 但 .emtext会覆盖 .warning ,若想 a 优先级提前可加入“!important” 如下:
/*I-C-T: 0-0-1*/
a {
text-decoration: none;
color:blue; !important;
}
加入“!important” 语句后优先级就会提到最前。