jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child

 

最近项目中遇到需求：只在第一列不能删除，不显示小叉号；点击可添加一列，后面的列右上角显示小叉号，可以点击删除。

我是使用以下方法解决这个小需求

 

：CSS伪类选择器:first-child设置所有小叉号不显示，当点击添加一列时，用jQuery过滤选择器只控制第一个不显示小叉号

{:;:;:;:;:;:;:;

}<span style="color: #800000;">
.rule-delete:first-child {<span style="color: #ff0000;">
display:<span style="color: #0000ff;"> none;
}
//或者

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

 

$(".rule-delete"".rule-delete:first").hide();一个策略没有删除叉号

 

在解决的过程中，我还踩了了个坑，误用:frist-child。为了避免以后继续踩坑，现在用个小例子记录下jQuery过滤选择器:first和:first-child的区别。

irst过滤器只匹配第一个子元素，而:frist-child过滤器将为每个父元素匹配一个子元素。

对于下面的HTML代码：

John Karl Brandon Glen Tane Ralph

 

$("ul li:first").text();得到的结果为John.
$("ul li:first-child").text();得到的结果为John和Glen.