我的 CSS 样式影响了其他我不想要的标签

Question

我有一张 div class 有页脚的卡片：

<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 class 卡片的页脚具有以下样式：

.card footer {
    background-color: #D6E4E3;
    display: flex;
    flex-direction: column;
    align-items: center;   
    margin: 0;
    padding: 0;
}

当我在页面底部使用相同的标签页脚时，这个新标签的样式会影响 div 卡片内的标签页脚的样式。我该怎么做才能避免这种情况发生？怎样才能使用很多tags footer和style互相不覆盖？

footer {
    height: 5%;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#5665e7, #7083E5);
}

Answer 1

通过使用 classes，您现在可以避免 bottom-page 页脚的样式会影响 card-footer。

.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>

您还可以使用这种方法轻松获得可重复使用的样式。

Answer 2

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;

}

Answer 3

   .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>

use class instead off className

我的 CSS 样式影响了其他我不想要的标签

My CSS style is affecting other tags which I don't want

html

css

frontend

styles

footer