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

Question

大家好！

我对社区来说是HTML和CSS的新手。

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

• 第一张卡片有一个容器，左边是图像，右
  边是段落
• 第二张卡片分为两个容器，左边一个段落，右
  边一个图像
• 第三张卡片分为两个容器，左边有图像，右
  边是段落
• 第 4 张卡片有一个容器，左侧是图像，左侧是段落，右侧
  是图像
• 第 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色和$secondary色为这些卡片的背景着色。我使用 nth-child(4( 来定位第 4 张牌并更改背景颜色，但我找不到一种方法来定位第 3 张牌的 2 个内部容器来添加边距并更改背景颜色！

我将不胜感激任何帮助！谢谢！

Answer 1

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。

Answer 2

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

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

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