我的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

footer frontend html styles