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没有做到这一点。请帮忙。

更新

NB ：动态生成父p元素中的div元素。这意味着有时在第一个 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>

Answer 2

.par:first-child等于*.par:first-child，这意味着选择任何第一个孩子为父母并拥有课程per的元素;所以，不要选择<p class="par">因为它不是第一个孩子。这是第3个孩子所以使用这个：

.test .par:nth-child(3) .test1 .test2 {

＆＃13;

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

＆＃13;

    <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>

＆＃13;

更新：

如果p动态生成，您只需要先使用.par：

.test .par .test1 .test2 {
  color: red;
} 

.test .par ~ .par .test1 .test2 {
  color: black;
}

＆＃13;

.test .par .test1 .test2 {
  color: red;
} 

.test .par ~ .par .test1 .test2 {
  color: black;
}

＆＃13;

<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>

＆＃13;

Answer 3

.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>

无法选择子元素

3 个答案: