如何解决我的CSS样式影响了其他我不想要的标签
我有一张带页脚的div类卡:
<div className='card'>
<img src={thumb2} />
<footer>
<p>Beautifull and cozy house for you and familly</p>
<span>$: 1200,00/month</span>
</footer>
</div>
并且div类卡的页脚具有以下样式:
.card footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
当我在页面底部使用相同的标签页脚时,此新标签的样式会影响div卡中的标签页脚的样式。我该怎么做才能避免这种情况发生?如何使用大量标签页脚,并且彼此之间的样式不会覆盖?
footer {
height: 5%;
display: flex;
justify-content: center;
background-image: linear-gradient(#5665e7,#7083E5);
}
解决方法
通过使用classes
,您现在避免了底部页脚的样式会影响卡片页脚。
.card--footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.page--footer {
height: 5%;
display: flex;
justify-content: center;
background-image: linear-gradient(#5665e7,#7083E5);
}
<div className='card'>
<img src={thumb2} />
<footer class="card--foter">
<p>Beautifull and cozy house for you and familly</p>
<span>$: 1200,00/month</span>
</footer>
</div>
<footer class="page--footer"></footer>
使用这种方法,您还可以轻松实现可重复使用的样式。
,div footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
div footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
padding: 0;
}
, .card footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
<div class='card'>
<img src={thumb2} />
<footer>
<p>Beautifull and cozy house for you and familly</p>
<span>$: 1200,00/month</span>
</footer>
</div>
</body>
</html>
使用类,而不要使用className
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。