html不能用css样式,css样式无法覆盖怎么办？

css样式无法覆盖怎么办？

css样式无法覆盖是因为css选择器优先级的问题，提高css样式的优先级即可覆盖css样式。

下面，我们通过一个小案例来看看css样式无法被覆盖的问题，以及解决方法。

下面这段代码中，一个类名为wrap的div包裹住了一个类名为app的div；并且在style标签中，定义了两次.app的样式，按理来说，第二次申明的css样式应该覆盖了第一次申明的，但结果却不是这样。

Document

.wrap .app{

width: 100px;

height: 100px;

border: 1px solid #000;

background: transparent;

}

.app{

width: 200px;

background: skyblue;

}

app

可以看见，第二次声明的并没有生效，这是因为.wrap .app申明的样式优先级更高。(相关课程推荐：css视频教程)

解决方法有两个：

1、将第二个.app改成.wrap .app，这样可以提高它的优先级.wrap .app{

width: 200px;

background: skyblue;

}

2、给第二个.app内的样式加上 !important，提高优先级.app{

width: 200px !important;

background: skyblue !important;

}

样式覆盖生效！

本文来自css3答疑栏目，欢迎学习！