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.