css 之优先策略

最新推荐文章于 2025-09-02 10:01:16 发布

原创最新推荐文章于 2025-09-02 10:01:16 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

6 篇文章

订阅专栏

<html>
	<head>
	   <title>testCSS</title>		   
	   <style type="text/css">
	   	  h2{
	   	  		color:red;
	   	  }
        h2{
            color:green;
        }
        h3{
           color:red;
        }
        h5{
            color:green;
        }
	   	</style>
	   	<link rel="stylesheet" type="text/css" href="a.css" />
	</head>
	<body>
		    <h1 style="color:red;color:green">1.绿色，当内联的方式定义color:red;color:green，以后面的为准，后面会把前面的覆盖</h1>
		    <h2 >2.绿色，当内联的方式定义两次颜色，以后面的为准，后面会把前面的覆盖</h2>
		    <h3 style="color:green">3.当以内联和内部样式表的方式定义，内联优先于内部样式表</h3>
		    <h4 style="color:green">4.当以内联和内部样式表的方式定义，内联优先于内部样式表,与内部样式表存放的位置无关</h3>
		    <h5>5.当内部样式表和外部样式表同时定义时，与内联样式与外部样式表定义的顺序有关，以后面为准，后面会把前面的覆盖</h5>
	</body>
	<style type="text/css">   	 
        h4{
           color:red;
        }
	   	</style>
	   	 

</html>

执行结果：

<html>
	<head>
	   <title>testCSS</title>		   
	   <style type="text/css">
	   	  h1{
	   	     color:green;
	   	  }
	   	  #h1id{
	   	     color:blue;
	   	  }
	   	  .h1class{
	         color:yellow;   	  
	   	  }
	   	  
	   	  #h2id h2{
	   	     color:blue;
	   	  }
	   	  .h2class h2{
	   	      color:yellow
	   	  }
	   	  div h2{
	   	     color:red;
	   	  }
	   	</style>
	</head>
	<body>
		   一、内联>>id选择器>>类选择器>>标签选择器   >>：表示优先的意思   <br>
		    <h1 style="color:red" id="h1id" class="h1class">1.红色 内联、标签选择器、类选择器、id选择器都符合，优先内联</h1>
		    <h1 style="" id="h1id" class="h1class">2.蓝色 标签选择器、类选择器、id选择器都符合，优先id选择器</h1>
		     <h1 style=""  class="h1class">3.黄色 标签选择器、类选择器都符合，优先类选择器</h1>
		     <h1 style="" >4.绿色 最终才是标签选择器</h1>
		   二、派生选择器依然遵守上面的规律  id派生>>类派生 >>标签派生 
		      <div id="h2id" class="h2class"><h2>1.蓝色</h2></div>
		      <div           class="h2class"><h2>2.黄色</h2></div>
		      <div                          ><h2>3.红色</h2></div>
	</body>
	
	   	 

</html>