css PHP代码段样式不会相互影响

qmelpv7a 于 2023-07-01 发布在 PHP

关注(0)|答案(1)|浏览(109)

header.php:

<div class="div1">
<!-- Header content -->
</div>
<style>
.div1 {
    /* Styles for div1 in the header */
}
</style>

footer.php:

<div class="div1">
<!-- Footer content -->
</div>
<style>
.div1 {
    /* Styles for div1 in the footer */
}
</style>

index.php:

<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>

当我将PHP代码段放在index.php中时，因为它们具有相同的类名，所以样式会相互影响。我想保持相同的名称，但没有风格相互影响。有什么方法可以实现这一点或唯一的方法，它改变的名称？

请我想要完全相同的类名不. header-div 1和. footer-div 1. OR .header. div 1和.footer. div 1 *

css

来源：https://stackoverflow.com/questions/76572873/php-snippets-styles-not-affect-each-other

1条答案

按热度按时间

ijxebb2r1#

在使用相同类名的同时应用不同样式的唯一方法是增加选择器的特异性。这可以通过使用包含元素类型的选择器或包含元素上的两个类的选择器来完成。

* {
  margin-block: 1em;
}

header.div1 {
  color: firebrick;
  background-color: aliceblue;
}

footer.div1 {
  color: aliceblue;
  background-color: red;
}


header .div1 {
  color: red;
  background-color: antiquewhite;
}

footer .div1 {
  color: antiquewhite;
  background-color: slateblue;
}


.header.div1 {
  color: slateblue;
  background-color: mintcream;
}

.footer.div1 {
  color: mintcream;
  background-color: firebrick;
}

<header class="div1">
  Header content
</header>

<footer class="div1">
  Footer content
</footer>

<hr>

<header>
  <div class="div1">
    Header content
  </div>
</header>

<footer>
  <div class="div1">
    Footer content
  </div>
</footer>

<hr>

<div class="header div1">
  Header content
</div>

<div class="footer div1">
  Footer content
</div>

赞(0）回复(0）举报 2023-07-01

我来回答

css PHP代码段样式不会相互影响

1条答案

相关问题

热门标签

最新问答