Styled Components中如何定位ImgGrid下的ColorBox:nth-child(2)修改背景色？

It sounds like you're hitting a common gotcha with the :nth-child selector — let’s break this down and get your background color working properly.

Why Your Current Selector Isn’t Working #

The :nth-child(2) selector doesn’t filter by class; it simply targets the second child element of the parent, regardless of what that element is. So if your ImgGrid has any other elements (like a hidden wrapper, text node, or unrelated component) before the second ColorBox, your selector will try to style that unrelated element instead of the ColorBox you want.

For example, if your HTML looks like this:

<div class="ImgGrid">
  <span>Grid Title</span> <!-- This is child 1 -->
  <div class="ColorBox">...</div> <!-- Child 2 (matches .ColorBox:nth-child(2)) -->
  <div class="ColorBox">...</div> <!-- Child 3 (your target, but selector misses it) -->
</div>

Your original code would style the first ColorBox, not the second one.

Correct Ways to Target the Second ColorBox #

1. Use the Modern :nth-child(of) Syntax (Recommended)

Modern browsers support a precise version of :nth-child that lets you filter by class. This directly targets the second child of ImgGrid that has the ColorBox class, ignoring any other siblings:

.ImgGrid > :nth-child(2 of .ColorBox) {
  background-color: #your-desired-color;
}

This is the cleanest solution if you don’t need to support very old browsers (like IE11).

2. Ensure All Direct Children of ImgGrid Are ColorBoxes

If you can adjust your HTML so every direct child of ImgGrid is a ColorBox, your original selector will work as expected:

<div class="ImgGrid">
  <div class="ColorBox">...</div>
  <div class="ColorBox">...</div> <!-- Now this is child 2 -->
  <div class="ColorBox">...</div>
</div>

Then your CSS can stay simple:

.ImgGrid > .ColorBox:nth-child(2) {
  background-color: #your-desired-color;
}

3. Use :nth-of-type (If All ColorBoxes Share the Same Tag)

If all your ColorBox elements are the same HTML tag (e.g., <div>), you can use :nth-of-type to target the second instance of that tag with the ColorBox class:

.ImgGrid > div.ColorBox:nth-of-type(2) {
  background-color: #your-desired-color;
}

Note: This only works if there are no other <div> elements as direct children of ImgGrid that don’t have the ColorBox class.

Quick Debug Tip #

Open your browser’s dev tools (F12), inspect the ImgGrid element, and look at its child nodes. You’ll see exactly how many siblings are present and which position your target ColorBox is in — this will confirm why your original selector wasn’t hitting the right element.

内容的提问来源于stack exchange，提问作者tom harrison