css - 无法选择子元素

Question

.test .par:first-child .test1 .test2 {
  color: red;
}

<div class="test">
  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is <i class="test1"> dsd <i class="test2">red</i>text.</i> test
  </p>
  <p class="par">
    This is <i class="test1"> dsd <i class="test2">shouldn't changed</i> text.</i> test
  </p>
</div>

在上面的代码中，我想做的是为第一类 test2 应用一个 css，但我做不到。那个CSS没有做这件事。请帮忙。

更新

注意:父div 元素中的p 元素是动态生成的。这意味着有时在第一个 test2 元素之前有更多的 p 元素，有时 test2 元素是来自父元素的第一个元素。

Answer 1

容器 .test 包含 4 个 p 元素，因此您定位的元素不是第一个子元素，而是第三个。相反，您可以这样做:

.test .par:nth-child(3) .test1 .test2 {
  color: red;
}

/*
Or simply
.test p:nth-child(3) .test1 .test2 {
  color: red;
}
*/

<div class="test">
  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">red</i> text.
    </i>
    test
  </p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">shouldn't changed</i> text.
    </i>
    test
  </p>
</div>

更新

如果 p 元素是动态生成的，您将无法选择具有当前 HTML 结构的 .test2 元素(除非您能够更改它)。我们也可以考虑使用 nth-of-type 但 .test2 在两个 p 元素中都在相同的范围内。

顺便说一句，如果有兴趣，这里有一个非 CSS 解决方案:

$('.par').eq(0).find('.test2').css('color','red');

//to only consider test2 you can simply use :
//$('.test2').eq(0).css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">red</i> text.
    </i>
    test
  </p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">shouldn't changed</i> text.
    </i>
    test
  </p>
</div>