html > html学习 >

优先权问题导致定义的css样式没有作用失效

2016-07-22 22:58:24 优先权问题导致定义的css样式没有作用CSS失效

CSS布局中常见优先权问题，而导致定义的css样式没有作用，CSS失效。

失效示例完整HTML+css代码如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
  5. <title>blueidea</title> 
  6. <style type="text/css"> 
  7. #aa ul li{color:red} 
  8. .aa{color:blue} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div id="aa"> 
  13. <ul> 
  14. <li class="aa"> 
  15. 测试内容HTML8，CSS优先权问题</li> 
  16. </ul> 
  17. </div> 
  18. </body> 
  19. </html> 

这里你无法用.aa定义到li 遇到这种情况怎么解决呢？（这里li设置class=aa失效）。解决答案是提高.aa 的优先权 比如#aa ul li.aa 优先权指向（ CSS的优先权）

解决后代码如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
  5. <title>blueidea</title> 
  6. <style type="text/css"> 
  7. #aa ul li {color:red} 
  8. #aa ul li.aa {color:blue} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div id="aa"> 
  13. <ul> 
  14. <li class="aa">测试内容HTML8，CSS优先权问题</li> 
  15. </ul> 
  16. </div> 
  17. </body> 
  18. </html> 

以上通过对.aa只向，CSS给予指定父级（实现去掉ul li设置CSS字体颜色为红色设置优先权）。

相关词： 失效 优先权
上一篇：CSS解决IE6使用滤镜使PNG图片透明后 容器内链接失效的问题
下一篇：CSS布局时定义id与class有什么区别吗
更新