Question

我尝试定位课程.textbox-fill以更改每个单独的框元素的背景颜色和文字颜色。例如，.textbox-fill的第一个孩子应该是灰色的。第二个孩子应该是白人。第三个孩子我想稍微调整身高等等。

我尝试使用nth-child选择器#About-Container .about-inner-content article:nth-child(1n+2) .textbox-fill似乎无法正常工作。 Example here

    <article class="col-sm-6 grid-tile">

  <div class="textbox-fill">
  <div class="about-textbox">
    <h2>Some text</h2>
    <p>Some text</p>

</div>
 </div>  
  </article>

我过去遇到过这个问题，而且我不能100％确定我是如何解决它的。我已经阅读了关于这个主题的几篇文章和帖子。我理解基础知识，但是这样的事情比较复杂，我总是用试错法来处理。

有谁知道如何解决这个问题？

Answer 1

由于您的.textbox-fill位于article内，因此您需要article，因为使用text-fill的{{1}}目标不起作用因为它不能在其父级之外看到

所以改为

＆＃13;

nth-child

＆＃13;

article:nth-child(1) .textbox-fill {
  color: red;
}

article:nth-child(2) .textbox-fill {
  color: lime;
}

article:nth-child(3) .textbox-fill {
  color: blue;
}

＆＃13;

如果我们谈论<article class="col-sm-6 grid-tile"> <div class="textbox-fill"> <div class="about-textbox"> <h2>Some text</h2> <p>Some text</p> </div> </div> </article> <article class="col-sm-6 grid-tile"> <div class="textbox-fill"> <div class="about-textbox"> <h2>Some text</h2> <p>Some text</p> </div> </div> </article> <article class="col-sm-6 grid-tile"> <div class="textbox-fill"> <div class="about-textbox"> <h2>Some text</h2> <p>Some text</p> </div> </div> </article> .textbox-fill的孩子.about-textbox和h2，请执行以下操作： p中的全局选择器*，因为子项属于不同类型

＆＃13;

*:nth-child

＆＃13;

.textbox-fill .about-textbox *:nth-child(1) {
  color: red;
}

.textbox-fill .about-textbox *:nth-child(2) {
  color: lime;
}

＆＃13;

Answer 2

如果您有.textbox-fill有几个孩子，例如：

div.textbox-fill
  h1#header
  div#firstDiv
  div#secondDiv
  article#someArticle
  div#thirdDiv

现在，.textbox-fill div:first-child将没有任何目标，因为没有任何div是它的父亲的第一个孩子（.textbox-fill）。虽然.textbox-fill div:first-of-type将定位div#firstDiv。 .textbox-fill div:nth-child(2)也会定位div#firstDiv。 div#thirdDiv将为.textbox-fill div:nth-of-type(3)或.textbox-fill div:nth-child(5)或.textbox-fill div:last-child或.textbox-fill div:last-of-type。

如果您希望定位网站上的特定.textbox-fill，但使用不同的父母，例如：

div.something
  div.textbox-fill
[...]
article#other
  div.textbox-fill

您无法使用nth-child或nth-of-type定位它。您需要根据站点树找到另一种方法。

定位和理解CSS子选择器

2 个答案: