Question

我无法使用以下html结构的nth-child或nth-of-type：

<div class="wrapper">
    <div class="child_1">Child 1</div>
    <div> Not child 1 </div>
    <div class="child_1">Child 1</div>
    <div class="child_1">Child 1</div>
</div>

我想要做的是选择第二个child_1，但我无法找到。有没有人对我有答案？

Answer 1

您无法为课程选择div。您必须改为定位.wrapper div:nth-child(3) { color: red; }。

来自MDN：

nth-of-type

nth-child

<div class="wrapper">
  <div class="child_1">Child 1</div>
  <div> Not child 1 </div>
  <div class="child_1">Child 1</div>
  <div class="child_1">Child 1</div>
</div>

var time = DateTime.Parse(DateTime.Now.ToString());
        var clientZone = TimeZoneInfo.FindSystemTimeZoneById("India Standard Time");
        var utcTime = TimeZoneInfo.ConvertTimeToUtc(time, clientZone);

Answer 2

这将完成你的工作。

.wrapper .child_1:nth-child(3){
  background:red;
}

    <div class="wrapper">
        <div class="child_1">Child 1</div>
        <div> Not child 1 </div>
        <div class="child_1">Child 1</div>
        <div class="child_1">Child 1</div>
    </div>

但是，如果您想要支持child选择。有几种类型的选择。例如nth-child，nth-of-type，first-child和last-child

在此示例中，您无法使用nth-of-type，但可以使用其余部分。如果这是一个长子组，并且您无法选择底部，则可以使用。

.wrapper .child_1:last-child{
  background:red;
}

如果您想选择second last child，可以使用：

.wrapper .child_1:last-child(2){
  background:red;
}

这也来自top使用first-child子选择器。 TY

了解CSS子选择器

2 个答案: