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.

转载于:https://www.cnblogs.com/baiyangyuanzi/p/6599640.html

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

CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS伪类选择器详细讲解
前言伪类选择器在CSS中起到的作用可以说是至关重要的,如果CSS没有伪类选择器,有很多效果都要借助js来完成,这样不仅代码量增加,维护起来你难度也大.这样程序员的工作量大,也违背了CSS诞生的作用, ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
css伪类选择器以及form表单
表格标签 <table></table> 将table分为三块 <thead></thead> <tbody></tbod ...
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
CSS 伪类选择器 last-child 和 last-of-type 的区别
文章目录 "最后一个"伪类选择器 :last-child :last-of-type 总结参考文章 "最后一个"伪类选择器 :last-child 语法 el ...

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

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

最新文章

热门文章