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

标签： cssbackground-colorpseudo-element

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>