jQuery過濾選擇器:first和:first-child的區別，CSS僞類:first-child

 

最近項目中遇到需求：只在第一列不能刪除，不顯示小叉號；點擊可添加一列，後面的列右上角顯示小叉號，能夠點擊刪除。

我是使用如下方法解決這個小需求

---

 

：CSS僞類選擇器:first-child設置全部小叉號不顯示，當點擊添加一列時，用jQuery過濾選擇器只控制第一個不顯示小叉號

.rule-delete {
    position: absolute;
    right: 16px;
    top: 11px;
    width: 20px;
    height: 20px;
    background: url("../../homepage/images/btn_ic_cancle.png") no-repeat;
    background-size: cover;

}
.rule-delete:first-child {
    display: none;
}
//或者

.rule-delete:nth-child(1) {
    display: none;
}

 

$(".rule-delete").show();
$(".rule-delete:first").hide();//第一個策略沒有刪除叉號

---

 

在解決的過程當中，我還踩了了個坑，誤用:frist-child。爲了不之後繼續踩坑，如今用個小例子記錄下jQuery過濾選擇器:first和:first-child的區別。

:first過濾器只匹配第一個子元素，而:frist-child過濾器將爲每一個父元素匹配一個子元素。

對於下面的html代碼：

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

 

$("ul li:first").text();獲得的結果爲John.
$("ul li:first-child").text();獲得的結果爲John和Glen.