如何定位容器中的特定容器以更改背景颜色？

Question

大家好！

对于 HTML 和 CSS，我是社区的新手。

我正在建立一个有 5 张卡片的网站：

• 第一张卡片有一个容器，左边是图像，右边是段落
  
• 第二张卡片分为两个容器，左边一个段落，右边一个图像
  
• 第三张卡片分为两个容器，左边是图片，右边是段落
  
• 第四张卡片有一个容器，左边有一个图片，左边有一个段落，右边有一个图片
  
• 第五张卡片有一个带有居中段落的容器
  

#home {
      &-a {
        .card {
          &-container {
            display: flex;
            background: $main-color;
            box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
            width: auto;
            height: auto;
            margin: 5rem 1rem;
            padding: 0.5rem;

            .text-wrapper {
              width: 150%;
            }

            &:nth-child(4) {
              background: $secondary-color;
            }

            &-split {
              display: flex;
              margin: 5rem 1rem;
              height: auto;
            }

            &-text {
              background: $secondary-color;
              box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
              margin-right: 2rem;
              width: 300%;
            }

            &-image {
              background: $secondary-color;
              box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
              padding: 0.5rem;
            }
          }
        }

        .image-wrapper {
          background: $dark-color;
          padding: 3rem;
        }

        .text-wrapper {
          padding: 1rem;
          margin: 2rem;
        }
      }
    }

    .container {
      max-width: $website-width;
      margin: auto;
      padding: auto;
      overflow: hidden;
    }

    .reverse {
      flex-direction: row-reverse;
    }

<section id="home-a">
  <div class="container">
    <!-- 1st Card -->
    <div class="card-container my-2">
      <div class="image-wrapper">
        <img src="img/darts.jpg" alt="Darts" />
      </div>
      <div class="text-wrapper">
        <h2>Darts</h2>
        <h3>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
          inventore ratione architecto velit labore quae consequatur minus
          rem incidunt.
        </h3>
      </div>
    </div>

    <!-- 2nd Card - Split -->
    <div class="card-container-split my-2">
      <div class="card-container-text">
        <div class="text-wrapper">
          <h2>Unsere Getränkekarte</h2>
          <h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
            inventore ratione architecto velit labore quae consequatur minus
            rem incidunt.
          </h3>
        </div>
      </div>
      <div class="card-container-image">
        <div class="image-wrapper">
          <img src="img/drinks.jpg" alt="Getränke" />
        </div>
      </div>
    </div>

    <!-- 3rd Card - Split Reverse -->
    <div class="card-container-split my-2 reverse">
      <div class="card-container-text">
        <div class="text-wrapper">
          <h2>Reservierung</h2>
          <h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
            inventore ratione architecto velit labore quae consequatur minus
            rem incidunt.
          </h3>
        </div>
      </div>
      <div class="card-container-image">
        <div class="image-wrapper">
          <img src="img/reserved.jpg" alt="Reservierung" />
        </div>
      </div>
    </div>

    <!-- 4th Card Reverse -->
    <div class="card-container my-2 reverse">
      <div class="image-wrapper">
        <img src="img/open.jpg" alt="Öffnungsschild" />
      </div>
      <div class="text-wrapper">
        <h2>Öffnungszeiten</h2>
        <h3>
          Montag: 11:00 - 23:30 Uhr
        </h3>
        <h3>
          Dienstag: 11:00 - 23:30 Uhr
        </h3>
        <h3>
          Mittwoch: 11:00 - 23:30 Uhr
        </h3>
        <h3>
          Donnerstag: 11:00 - 23:30 Uhr
        </h3>
        <h3>
          Freitag: 11:00 - 23:30 Uhr
        </h3>
        <h3>
          Samstag: 11:00 - 23:30 Uhr
        </h3>
        <h3>
          Sonntag: 11:00 - 23:30 Uhr
        </h3>
      </div>
    </div>

    <!-- 5th Card -->
    <div class="card-container my-2">
      <div class="text-wrapper">
        <h2>Covid 19</h2>
        <h3>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
          inventore ratione architecto velit labore quae consequatur minus
          rem incidunt.
        </h3>
      </div>
    </div>
  </div>
</section>

现在我想用 $main-color 和 $secondary-color 交替为这些卡片的背景着色。我使用 nth-child(4) 来定位第四张卡片并更改背景颜色，但我无法找到一种方法来定位第三张卡片的 2 个内部容器以添加边距并更改背景颜色！

如果有任何帮助，我将不胜感激！谢谢！

Answer 1

对于替代样式，您可以使用 :nth-child(odd) 和 :nth-child(even)。 要选择第三个的 2 个内部容器，您可以使用以下内容：

.container > :nth-child(3) > * {margin: 2rem; background-color: blue}

这将选择 .container 的第三个元素直接子元素的所有直接子元素

Answer 2

https://www.w3schools.com/cssref/sel_element_element.asp

我建议为每张卡片添加一个 ID，而不是依赖它们共享的这些类。它可能看起来像这样：

<div class="card-container my-2" id="FirstCard"></div>
<div class="card-container my-2" id="SecondCard"></div>

等等……

无论如何，这应该可以：

/*3rd Slide Div 1*/
card-container-split:nth-child(2) card-container-text{
    /*your styling*/
}

/*3rd Slide Div 2*/
card-container-split:nth-child(2) card-container-image{
    /*your styling*/
}

如果您决定改用 ID，请将 card-container-split:nth-child(2) 替换为第三张幻灯片的 ID。