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.