CSS :target::before pseudo-element 导致其容器的 background-color 出现问题

Question

我正在使用 :target::before pseudo-elements 和元素填充，以便将目标部分正确定位在固定 header 下，但这会导致部分容器的 background-color扩展超出该部分的顶部并进入上一节的内容（从而破坏了其通过交替 background-color 节容器来视觉划分内容的目的）。

如何调整我的代码，使部分 :target::before pseudo-element 的高度 + 负值 margin-top 不会在视觉上影响目标部分的 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>

CSS :target::before pseudo-element 导致其容器的 background-color 出现问题

CSS :target::before pseudo-element causing problems with its container’s background-color

css

background-color

pseudo-element