div中的第n個類型不起作用

Question

我正在嘗試使用此CSS選擇器在#user-attributes div中選擇第一個<h6>元素：

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

但這不起作用。 為什么不？

然后，我需要在#user-attributes div中選擇說第3個和第4個<h6> ，所以我正在使用: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>

Answer 1

從CSS角度來看，它看起來還不錯：

 div#user-attributes h6:nth-of-type(1) { background: red; } div#user-attributes h6:nth-of-type(2) { background: green; } div#user-attributes h6:nth-of-type(3) { background: blue; } 

 <div id="user-attributes"> <h6>first</h6> <h6>second</h6> <h6>third</h6> </div> 

您確定您的html是否符合您的想法？

Answer 2

我將在不看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-每選擇偽類。