CSS nth-child(1) 未显示整个页面部分 [重复]答案

【问题标题】：CSS nth-child(1) is not showing up with full page sections [duplicate]CSS nth-child(1) 未显示整个页面部分 [重复]
【发布时间】：2022-01-20 19:04:49
【问题描述】：

我的 HTML 和 CSS 中有 4 个 <section></section> 标签，并且有这些颜色变量：

:root {
  --home-page-color: red;
  --about-page-color: orange;
  --projects-page-color: yellow;
  --contact-page-color: green;
}

我也有这个section CSS：

section {
  height: 100vh;
}

section:nth-child(1) {
  background-color: var(--home-page-color);
}

section:nth-child(2) {
  background-color: var(--about-page-color);
}

section:nth-child(3) {
  background-color: var(--projects-page-color);
}

section:nth-child(4) {
  background-color: var(--contact-page-color);
}

我想要发生的是，当用户访问该网站时，他们会看到 4 个完整的页面部分，第一个是红色的，第二个是橙色的，第三个是绿色的，第四个是蓝色的。但是，似乎只显示了 3 个部分，第一个部分为橙色，而不是红色。这是为什么呢？

你可以在这里看到问题：https://personal-website.stcollier.repl.co/

这是我的完整代码：

:root {
  --text-glow-color: black;
  --small-text-glow-color: white;
  --home-page-color: red;
  --about-page-color: orange;
  --projects-page-color: yellow;
  --contact-page-color: green;

}

html,
  body {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
}

@keyframes slideInFromLeft {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;display: block;}
}

header {  
  animation: 1s ease-out 0s 1 slideInFromLeft;
  background: #333;
  padding: 3vh;
}

header a {
   opacity: 0;
   animation-fill-mode: forwards;
   animation-name: fadeIn;
   animation-timing-function: ease;
   text-decoration: none;
   animation-duration: 2s; 
   color: white;
   font-size: 1.5em;
   padding: 2vw;
   text-shadow: 0 0 10px var(--small-text-glow-color), 0 0 20px var(--small-text-glow-color), 0 0 30px var(--text-glow-color), 0 0 40px var(--text-glow-color), 0 0 50px var(--text-glow-color), 0 0 60px var(--text-glow-color), 0 0 70px var(--text-glow-color);
}

header a:nth-child(1) { /*Home*/
  animation-delay: 1s;
}
header a:nth-child(2) { /*About*/
  animation-delay: 1.5s;
}
header a:nth-child(3) { /*Projects*/
  animation-delay: 2s;
}
header a:nth-child(4) { /*Contact*/
  animation-delay: 2.5s;
}

section {
  height: 100vh;
}

section:nth-child(1) {
  background-color: var(--home-page-color);
}

section:nth-child(2) {
  background-color: var(--about-page-color);
}

section:nth-child(3) {
  background-color: var(--projects-page-color);
}

section:nth-child(4) {
  background-color: var(--contact-page-color);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <header>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </header>

    <section id="home">
    </section>

    <section id="about">
    </section>

    <section id="projects">
    </section>

    <section id="contact">
    </section>

    <script src="script.js"></script>
  </body>
</html>

感谢您的帮助。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

它没有按预期工作，因为nth-child(1) 在这里代表<header> 元素。这是因为nth-child() 选择器会统计所有子元素，无论其类型如何。

您可以通过从第二个孩子开始数来解决它...

section:nth-child(2) {
  background-color: var(--home-page-color);
}

... 或使用nth-of-type() 选择器，它会考虑元素类型

section:nth-of-type(1) {
  background-color: var(--home-page-color);
}

【讨论】：

【解决方案2】：

一种方法是使用块包装所有部分，以便您可以引用它，并且可以轻松地针对该块的特定子项。

:root {
  --text-glow-color: black;
  --small-text-glow-color: white;
  --home-page-color: red;
  --about-page-color: orange;
  --projects-page-color: yellow;
  --contact-page-color: green;

}

html,
  body {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
}

@keyframes slideInFromLeft {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;display: block;}
}

header {  
  animation: 1s ease-out 0s 1 slideInFromLeft;
  background: #333;
  padding: 3vh;
}

header a {
   opacity: 0;
   animation-fill-mode: forwards;
   animation-name: fadeIn;
   animation-timing-function: ease;
   text-decoration: none;
   animation-duration: 2s; 
   color: white;
   font-size: 1.5em;
   padding: 2vw;
   text-shadow: 0 0 10px var(--small-text-glow-color), 0 0 20px var(--small-text-glow-color), 0 0 30px var(--text-glow-color), 0 0 40px var(--text-glow-color), 0 0 50px var(--text-glow-color), 0 0 60px var(--text-glow-color), 0 0 70px var(--text-glow-color);
}

header a:nth-child(1) { /*Home*/
  animation-delay: 1s;
}
header a:nth-child(2) { /*About*/
  animation-delay: 1.5s;
}
header a:nth-child(3) { /*Projects*/
  animation-delay: 2s;
}
header a:nth-child(4) { /*Contact*/
  animation-delay: 2.5s;
}

section {
  height: 100vh;
}

main section:nth-child(1) {
  background-color: var(--home-page-color);
}

main section:nth-child(2) {
  background-color: var(--about-page-color);
}

main section:nth-child(3) {
  background-color: var(--projects-page-color);
}

main section:nth-child(4) {
  background-color: var(--contact-page-color);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <header>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </header>

<main>
    <section id="home">
      HOME
    </section>

    <section id="about">
      ABOUT
    </section>

    <section id="projects">
      PROJECTS
    </section>

    <section id="contact">
      CONTACT
    </section>
</main>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：