css样式在使用的时候很方便,但样式有继承性和层叠性这二个特征,在继承与层叠时,很有可能会产生冲突.

下面将介绍样式是怎么解决这些冲突

1.样式的继承性

 样式的最大特性是继承性.在HTm文档中.所有的嵌套标签就像一棵倒立的树,最顶端就像树根,最后一层层展开.颜色的继承性事指子标签可以继承父标签的样式。

    

 
  
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  3. <html> 
  4.   <head> 
  5.     <title>伪类和伪元素</title> 
  6.     <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.     <!--  
  9.        p {font-weight: bold;}  
  10.        ul {text-decoration: line-through;}  
  11.     --> 
  12.     </style> 
  13.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  14.    </head> 
  15.    <body> 
  16.        <ul> 
  17.            <li>列表项一</li> 
  18.            <li>列表项二</li> 
  19.        </ul> 
  20.        <p>这是一个测试网络,在该测试网里面包含了<i>斜体文字<ul>带下划线的文章</ul></i></p> 
  21.   </body> 
  22.  
  23. </html> 
 
  
虽然声明中指声明了<ul>标签的样式没有声明<li>的样式但是<li>标签依然继承父标签
 
  
Note:也不是所有的样式都是可以继承的,例如边框类的样式,包括边框,边界,填白等都不能继承.
 
  
解决各种样式重叠的
 
  
本人现在使用的!important 这是将样式权重设为最大.
 
  
 
 
  
 
  
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  3. <html> 
  4.   <head> 
  5.     <title>css冲突解决的方法不同浏览器css解决也可以用到</title> 
  6.     <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.     <!--  
  9.        body {font-size: 12pt;}  
  10.        div { text-decoration: underline !important;font-size: 16pt;}  
  11.        .vip {text-decoration: overline ;font-size: 30pt;}  
  12.     --> 
  13.     </style> 
  14.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  15.    </head> 
  16.    <body> 
  17.        <div class="vip">div 中的文字</div> 
  18.   </body> 
  19.  
  20. </html>