CSS :target::before 伪元素导致其容器的背景颜色出现问题

Question

我正在使用 :target::before 伪元素和元素填充，以便将目标部分正确定位在固定标题下，但是这会导致部分容器的背景颜色扩展到超出该部分的顶部并进入上一部分的内容(从而破坏了其通过交替部分容器的背景颜色在视觉上划分内容的目的)。

如何调整我的代码，使该部分的 :target::before 伪元素的高度 + 负边距顶部不会在视觉上影响目标部分的 background-color?

当然最好使用严格的 CSS 解决方案，但也可以接受 JavaScript 或 JQuery。

相关 CSS 片段:

.header_container {height: 6.8rem; margin: 0; padding: 0; width: 100vw; position: fixed; top: 0; display: block; z-index: 100;}
.container {width: 100%;}
.container:nth-of-type(even) {background-color: rgba(0,0,0,.06);}

/* Content positioned under fixed header */    
.main {margin-top: 6.8rem; width: 100%;} 
:target::before {height: 6.8rem; margin-top: -6.8rem; margin: 0; content: ""; display: block; visibility: hidden;}

/* Section padding */
.Section {padding-bottom: 5.5rem; width: 90%; margin: 0 auto;}
.Section:not(:target) {padding-top: 5.5rem;}
:target .services_header {padding-top: 5.5rem;}

完整代码:

html {
  overflow-x: hidden;
  margin-right: calc(100% - 100vw);
  font-size: 62.5%;
  line-height: 1.25;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-size: 1.4rem;
  letter-spacing: .0107em;
  color: #888;
  background-color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-align: left;
}

a:link,
a:visited,
a:hover,
a:focus {
  text-decoration: none;
  color: #fff;
}

a:hover,
a:focus {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.header_container {
  width: 100vw;
  position: fixed;
  top: 0;
  display: block;
  z-index: 100;
  font-size: 1.6rem;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  width: 100%;
}

.container:nth-of-type(even) {
  background-color: rgba(0, 0, 0, .06);
}

.Section {
  padding-bottom: 5.5rem;
  width: 90%;
  margin: 0 auto;
}

.Section:not(:target) {
  padding-top: 5.5rem;
  z-index: 90;
}

:target .services_header {
  padding-top: 5.5rem;
}

.Hcontainer {
  height: 6.8rem;
  margin: 0;
  padding: 0;
}

.main {
  margin-top: 6.8rem;
  width: 100%;
}

:target::before {
  margin: 0;
  content: "";
  display: block;
  visibility: hidden;
  height: 6.8rem;
  margin-top: -6.8rem;
}


/*** Text ***/

.logo {
  padding: 1rem 1.7rem 1rem 0;
  display: inline-block;
}

.services_header {
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 1.6rem 0;
  font-size: 2rem;
  color: #000;
}

.copy_description {
  margin: 1rem 0 0 0;
  padding: 0;
  line-height: 1.875;
}


/*** Menu  ***/

nav {
  margin: 0 auto;
  width: 90%;
  position: relative;
  display: inline-block;
  z-index: 100;
  padding: 1.6rem 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

nav li {
  display: block;
  float: left;
  padding: .5rem 0rem;
  position: static;
  flex: 0 1 auto;
  margin: 0rem;
  max-width: 13rem;
  line-height: 1.29;
  transition: .2s ease;
}

nav ul>li:not(:last-child) {
  margin-right: 3.5rem;
}

nav li a {
  padding: 0;
  line-height: 1.29;
  align-items: flex-start;
  display: flex;
}

<div id="header" class="header_container Hcontainer">
  <nav>
    <span class="logo"><a href="#">LOGO</a></span>
    <ul>
      <li><a href="#product">PRODUCT</a></li>
      <li><a href="#strategy">STRATEGY</a></li>
      <li><a href="#marketing">MARKETING</a></li>
    </ul>
  </nav>
</div>

<div class="main">
  <div class="container">
    <div id="product" class="Section">
      <div class="services_header">PRODUCT</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="container">
    <div id="strategy" class="Section">
      <div class="services_header">STRATEGY</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="container">
    <div id="marketing" class="Section">
      <div class="services_header">MARKETING</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>

Answer 1

考虑 section 的 after 伪元素来应用背景色，您可以轻松地控制它在 :target 上的高度

相关代码:

.container:nth-of-type(even) .Section:after {
  content:"";
  position:absolute;
  top:0;
  /* To cover the 5% removed from width on each side */
  left:-11%; /* more precisely it's 100/9*/ 
  right:-11%;
  /**/
  bottom:0;
  background-color: rgba(0, 0, 0, .06);
}
.container:nth-of-type(even) .Section:target:after {
   top:6.8rem; /* The height of the before */
}
.Section {
   position:relative; /* Added */
   padding-bottom:5.5rem; 
   width: 90%; 
   margin: 0 auto; 
}

完整代码:

html {
  overflow-x: hidden;
  margin-right: calc(100% - 100vw);
  font-size: 62.5%;
  line-height: 1.25;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-size: 1.4rem;
  letter-spacing: .0107em;
  color: #888;
  background-color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-align: left;
}

a:link,
a:visited,
a:hover,
a:focus {
  text-decoration: none;
  color: #fff;
}

a:hover,
a:focus {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.header_container {
  width: 100vw;
  position: fixed;
  top: 0;
  display: block;
  z-index: 100;
  font-size: 1.6rem;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  width: 100%;
}

.container:nth-of-type(even) .Section:after {
  content:"";
  position:absolute;
  top:0;
  left:-11%;
  right:-11%;
  bottom:0;
  background-color: rgba(0, 0, 0, .06);
}
.container:nth-of-type(even) .Section:target:after {
   top:6.8rem;
}

.Section {
  padding-bottom: 5.5rem;
  width: 90%;
  margin: 0 auto;
  position:relative;
}

.Section:not(:target) {
  padding-top: 5.5rem;
  z-index: 90;
}

:target .services_header {
  padding-top: 5.5rem;
}

.Hcontainer {
  height: 6.8rem;
  margin: 0;
  padding: 0;
}

.main {
  margin-top: 6.8rem;
  width: 100%;
}

:target::before {
  margin: 0;
  content: "";
  display: block;
  visibility: hidden;
  height: 6.8rem;
  margin-top: -6.8rem;
}


/*** Text ***/

.logo {
  padding: 1rem 1.7rem 1rem 0;
  display: inline-block;
}

.services_header {
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 1.6rem 0;
  font-size: 2rem;
  color: #000;
}

.copy_description {
  margin: 1rem 0 0 0;
  padding: 0;
  line-height: 1.875;
}


/*** Menu  ***/

nav {
  margin: 0 auto;
  width: 90%;
  position: relative;
  display: inline-block;
  z-index: 100;
  padding: 1.6rem 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

nav li {
  display: block;
  float: left;
  padding: .5rem 0rem;
  position: static;
  flex: 0 1 auto;
  margin: 0rem;
  max-width: 13rem;
  line-height: 1.29;
  transition: .2s ease;
}

nav ul>li:not(:last-child) {
  margin-right: 3.5rem;
}

nav li a {
  padding: 0;
  line-height: 1.29;
  align-items: flex-start;
  display: flex;
}

<div id="header" class="header_container Hcontainer">
  <nav>
    <span class="logo"><a href="#">LOGO</a></span>
    <ul>
      <li><a href="#product">PRODUCT</a></li>
      <li><a href="#strategy">STRATEGY</a></li>
      <li><a href="#marketing">MARKETING</a></li>
    </ul>
  </nav>
</div>

<div class="main">
  <div class="container">
    <div id="product" class="Section">
      <div class="services_header">PRODUCT</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="container">
    <div id="strategy" class="Section">
      <div class="services_header">STRATEGY</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="container">
    <div id="marketing" class="Section">
      <div class="services_header">MARKETING</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>