CSS中选择器优先级顺序实战讲解
我是标记选择器 div
|
<div id=”article”>itdriver.cn</div> |
<div id=”article” style=””>itdriver.cn</div> |
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
|
当我们运行示例的时候,会发现div的背景依然是黄色的,但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明: 行内样式 > ID选择器应用的样式。
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
|
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
div{
font-size:1em;
border:2px solid black;
color:green;
}
|
我们会发现,只有字体的颜色发生了变化,其他的样式还是之前的样式,这就说明标记选择器没有覆盖前面类选择器,ID选择器以及行内已定义的样式。这也就证明了 : 行内样式 >ID选择器 > 类选择器 > 标记选择器.
欢迎大家加入互联网技术交流QQ群:62329335
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。