博客展示了CSS样式表的优先级别，通过代码演示可知，直接重定义标签样式有效性最低，其次是用“.”定义的伪类，重定义标签加伪类方式优先级更高，用id定义的CSS样式优先级最高。
蛙蛙推荐:css样式表的优先级别演示
<!--
可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,
再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的css样式-->
<HTML>
<HEAD>
<STYLE>
H1{color:red; }
.myclass{color:green}
H2.myclass{color:blue}
#myid{color:brown}
</STYLE>
</HEAD>
<BODY>
<H1>这是红色的一号标题。</H1>
<P class="myclass">使用了"myclass"伪类的P标签中的正文是绿色的。</P>
<H2 class="myclass">但"myclass"类中的二号标题是蓝色的,因为H2.myclass{color:blue}重写了myclass伪类。</H2>
<P class="myclass" id="myid">以"myid"为标识的正文则是棕色的,这个是优先级别最高的。</P>
</BODY>
</HTML>
<!--
可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,
再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的css样式-->
<HTML>
<HEAD>
<STYLE>
H1{color:red; }
.myclass{color:green}
H2.myclass{color:blue}
#myid{color:brown}
</STYLE>
</HEAD>
<BODY>
<H1>这是红色的一号标题。</H1>
<P class="myclass">使用了"myclass"伪类的P标签中的正文是绿色的。</P>
<H2 class="myclass">但"myclass"类中的二号标题是蓝色的,因为H2.myclass{color:blue}重写了myclass伪类。</H2>
<P class="myclass" id="myid">以"myid"为标识的正文则是棕色的,这个是优先级别最高的。</P>
</BODY>
</HTML>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
