javascript - div中的第n个类型不起作用

我正在尝试使用此CSS选择器在<h6> div中选择第一个#user-attributes元素：

this.country = fixture.debugElement
               .query(By.css('div#user-attributes h6:nth-of-type(1) ')).nativeElement;

但这不起作用。为什么不？

然后，我需要选择说<h6> div中的第3个和第4个#user-attributes，所以我正在使用:nth-of-type。

不用担心茉莉花语法，这就是茉莉花如何使用CSS获取html元素的方法。

我的html：

<div _ngcontent-cvy-35="" class="card-noshadow" id="user-attributes">
    <div _ngcontent-cvy-35="" class="row">
        <div _ngcontent-cvy-35="" class="col-xs-12">
            <img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/maps-green.png">
            <h6 _ngcontent-cvy-35="">New Zealand</h6>
        </div>
    </div>
    <div _ngcontent-cvy-35="" class="row">
        <div _ngcontent-cvy-35="" class="col-xs-12">
            <img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/refresh.png">
            <h6 _ngcontent-cvy-35="">member since Mon Oct 13 2014 00:00:00 GMT+1300 (NZDT)</h6>
        </div>
    </div>
    <div _ngcontent-cvy-35="" class="row">
        <div _ngcontent-cvy-35="" class="col-xs-12">
            <img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/clock.png">
            <h6 _ngcontent-cvy-35="">last seen Thu Oct 13 2016 11:13:00 GMT+1300 (NZDT)</h6>
        </div>
    </div>
    <div _ngcontent-cvy-35="" class="row">
        <div _ngcontent-cvy-35="" class="col-xs-12">
            <img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/badge.png">
            <!--template bindings={
  "ng-reflect-ng-for-of": "active User,helper"
}--><div _ngcontent-cvy-35="" id="badges">
                <div _ngcontent-cvy-35="" class="badge">
                    active User
                </div>
            </div><div _ngcontent-cvy-35="" id="badges">
                <div _ngcontent-cvy-35="" class="badge">
                    helper
                </div>
            </div>
        </div>
    </div>
</div>

最佳答案

我将在不看HTML的情况下进行拍摄。

主要问题（可能）是nth-of-type()的工作方式与您想象的不同。使用nth-of-type()的元素必须是同级。如果您要定位的元素嵌套在其他元素内，则它将无法正常工作。

我猜你的标记是这样的：

<div id="user-attributes">
  <div>
    <h6>Header</h6>
  </div>
  <div>
    <h6>Header</h6>
  </div>
</div>

如果是这样，#user-attributes h6:nth-of-type(2)将不匹配第二个<h6>，因为它是#user-attributes > div > h6中的第一个类型。上面的<h6>不是同级（但其父级<div>是）。

#user-attributes h6:nth-of-type(2) {
  color: red;
}

<div id="user-attributes">
  <div>
    <h6>Header</h6>
  </div>
  <div>
    <h6>Header</h6>
  </div>
</div>

但是以下标记将：

<div id="user-attributes">
  <div>
    <h6>Header</h6>
    <h6>Header</h6>
  </div>
  <div>
    <h6>Header</h6>
  </div>
</div>

#user-attributes h6:nth-of-type(2) {
  color: red;
}

<div id="user-attributes">
  <div>
    <h6>Header</h6>
    <h6>Header</h6>
  </div>
  <div>
    <h6>Header</h6>
  </div>
</div>

如果您的标记与此类似，则必须向上移动文档树，并可能使用其他选择器。

#user-attributes > div:nth-of-type(2) h6 {
  color: red;
}

<div id="user-attributes">
  <div>
    <h6>Header</h6>
  </div>
  <div>
    <h6>Header</h6>
  </div>
</div>

如您所见，使用以下示例可能会变得棘手：

#user-attributes > div:nth-of-type(2) h6 {
  color: red;
}

<div id="user-attributes">
  <div>
    <h6>Header</h6>
    <h6>Header (Why am I not red?)</h6>
  </div>
  <div>
    <h6>Header</h6>
  </div>
</div>

此时，您可能想要向特定的<h6>添加一个类。您可以继续使用nth-of-type()，但可能会有点毛病，因为您将使用多个选择器，每个选择器都具有多个nth-伪类。