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

Question

我正在尝试选择第一个 <h6> #user-attributes 内的元素带有此 css 选择器的 div:

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

但它不起作用。为什么不呢？

然后我需要选择第 3 和第 4 个 <h6>在#user-attributes里面div 所以我使用 :nth-of-type .

不要担心 jasmine 语法，这就是 jasmine 获取 html 元素与 css 的方式。

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

Answer 1

我要在没有看到 HTML 的情况下拍摄一张照片。

主要问题(可能)是 nth-of-type() 工作方式与您想象的不同。元素使用 nth-of-type() 需要是 sibling 。如果您定位的元素嵌套在其他元素中，它将不起作用。

我猜你的标记是这样的:

<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>不是 sibling (但他们的 parent <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- 一起使用每个选择器的伪类。