html - CSS 中的第 n 个 child

Question

我之前使用过第 n 个 child ，但由于某种原因无法定位正确的 div:

<div class='main'>...</div>
  <div class='color'>...</div>
  <div class='number'>...</div>
    <div class='target_div'>...</div>
      <div class='target_me_one'>...</div>
      <div class='target_me_two'>...</div>
<div class='main'>...</div>
<div class='main'>...</div>
<div class='main'>...</div>
<div class='main'>...</div>
<div class='main'>...</div>
<div class='main'>...</div>

我希望第一次出现 main，main (number) 的第二个 child ，number (target_div) 的第一个 child ，然后是 target_div 的两个 child 。

整个目标是从 main 的第一次出现开始改变 target_me_one/target_me_two。我无法通过选择器单独定位这两个(由于我正在使用的插件)。

这是可能的还是我离题太远了？？？

Answer 1

这将完成您所期望的，而不依赖于特定选择器的类。查看 JSFiddle

      .main:first-of-type > *:nth-child(2) > *:nth-child(1) * {
        color: red;
      }