最近项目中遇到需求：只在第一列不能删除，不显示小叉号；点击可添加一列，后面的列右上角显示小叉号，可以点击删除。
我是使用以下方法解决这个小需求
：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.
