css样式无法覆盖怎么办?
css样式无法覆盖是因为css选择器优先级的问题,提高css样式的优先级即可覆盖css样式。
下面,我们通过一个小案例来看看css样式无法被覆盖的问题,以及解决方法。
下面这段代码中,一个类名为wrap的div包裹住了一个类名为app的div;并且在style标签中,定义了两次.app的样式,按理来说,第二次申明的css样式应该覆盖了第一次申明的,但结果却不是这样。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap .app{ width: 100px; height: 100px; border: 1px solid #000; background: transparent; } .app{ width: 200px; background: skyblue; } </style> </head> <body> <div class="wrap"> <div class="app">app</div> </div> </body> </html>
可以看见,第二次声明的并没有生效,这是因为.wrap .app申明的样式优先级更高。(相关课程推荐:css视频教程)
解决方法有两个:
1、将第二个.app改成.wrap .app,这样可以提高它的优先级
.wrap .app{ width: 200px; background: skyblue; }
2、给第二个.app内的样式加上 !important,提高优先级
.app{ width: 200px !important; background: skyblue !important; }
样式覆盖生效!
本文来自css3答疑栏目,欢迎学习!
以上就是css样式无法覆盖怎么办?的详细内容,更多请关注易知道|edz.cc其它相关文章!