css样式表的优先级别演示

&lt;!--
可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,
再次是用重定义标签加伪类的方式(类似于H2.myclass{color:blue}的写法),级别最高的就是用id定义的css样式--&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
  H1{color:red; }
  .myclass{color:green}
  H2.myclass{color:blue}
  #myid{color:brown}
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;这是红色的一号标题。&lt;/h1&gt;
&lt;p class="myclass"&gt;使用了"myclass"伪类的P标签中的正文是绿色的。&lt;/p&gt;
&lt;h2 class="myclass"&gt;但"myclass"类中的二号标题是蓝色的,因为H2.myclass{color:blue}重写了myclass伪类。&lt;/h2&gt;
&lt;p class="myclass" id="myid"&gt;以"myid"为标识的正文则是棕色的,这个是优先级别最高的。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!--

可以看出直接重定义标签样式的有效性是最低的, 其次是用"."定义的伪类,

再次是用重定义标签加伪类的方式(类似于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>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复