首页 > 代码库 > css 之优先策略

css 之优先策略

2024-07-12 16:45:50   220人阅读

Html代码  收藏代码
  1. <html>  
  2.     <head>  
  3.        <title>testCSS</title>            
  4.        <style type="text/css">  
  5.           h2{  
  6.                 color:red;  
  7.           }  
  8.         h2{  
  9.             color:green;  
  10.         }  
  11.         h3{  
  12.            color:red;  
  13.         }  
  14.         h5{  
  15.             color:green;  
  16.         }  
  17.         </style>  
  18.         <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"a.css" />  
  19.     </head>  
  20.     <body>  
  21.             <h1 style="color:red;color:green">1.绿色，当内联的方式定义color:red;color:green，以后面的为准，后面会把前面的覆盖</h1>  
  22.             <h2 >2.绿色，当内联的方式定义两次颜色，以后面的为准，后面会把前面的覆盖</h2>  
  23.             <h3 style="color:green">3.当以内联和内部样式表的方式定义，内联优先于内部样式表</h3>  
  24.             <h4 style="color:green">4.当以内联和内部样式表的方式定义，内联优先于内部样式表,与内部样式表存放的位置无关</h3>  
  25.             <h5>5.当内部样式表和外部样式表同时定义时，与内联样式与外部样式表定义的顺序有关，以后面为准，后面会把前面的覆盖</h5>  
  26.     </body>  
  27.     <style type="text/css">          
  28.         h4{  
  29.            color:red;  
  30.         }  
  31.         </style>  
  32.            
  33.   
  34. </html>  

 执行结果：

 

Html代码  收藏代码
  1. <html>  
  2.     <head>  
  3.        <title>testCSS</title>            
  4.        <style type="text/css">  
  5.           h1{  
  6.              color:green;  
  7.           }  
  8.           #h1id{  
  9.              color:blue;  
  10.           }  
  11.           .h1class{  
  12.              color:yellow;          
  13.           }  
  14.             
  15.           #h2id h2{  
  16.              color:blue;  
  17.           }  
  18.           .h2class h2{  
  19.               color:yellow  
  20.           }  
  21.           div h2{  
  22.              color:red;  
  23.           }  
  24.         </style>  
  25.     </head>  
  26.     <body>  
  27.            一、内联>>id选择器>>类选择器>>标签选择器   >>：表示优先的意思   <br>  
  28.             <h1 style="color:red" id="h1id" class="h1class">1.红色 内联、标签选择器、类选择器、id选择器都符合，优先内联</h1>  
  29.             <h1 style="" id="h1id" class="h1class">2.蓝色 标签选择器、类选择器、id选择器都符合，优先id选择器</h1>  
  30.              <h1 style=""  class="h1class">3.黄色 标签选择器、类选择器都符合，优先类选择器</h1>  
  31.              <h1 style="" >4.绿色 最终才是标签选择器</h1>  
  32.            二、派生选择器依然遵守上面的规律  id派生>>类派生 >>标签派生   
  33.               <div id="h2id" class="h2class"><h2>1.蓝色</h2></div>  
  34.               <div           class="h2class"><h2>2.黄色</h2></div>  
  35.               <div                          ><h2>3.红色</h2></div>  
  36.     </body>  
  37.       
  38.            
  39.   
  40. </html>  

  


联系
我们