:first-child() :last-child() :nth-child()使用的注意事项

最新推荐文章于 2023-09-05 16:06:32 发布
最新推荐文章于 2023-09-05 16:06:32 发布
阅读量543 收藏 1
点赞数
分类专栏： HTML 文章标签： CSS 前端 HTML 元素选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41671709/article/details/100595539
版权

元素选择器

 :first-child()
 :last-child()
 :nth-child()

这三个元素选择器能够使用生效的条件：

冒号：前的元素 必须是其父元素中的第一个/最后一个/第n个子标签，
并不是同类型子标签中的第一个/最后一个/第n个

通俗点就是：
①选择器所选的子元素要符合其父元素的位置条件
②符合位置条件的子元素标签类型要与选择器选取的标签类型一致

牛耕田ljx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中的:nth-child，:first-child，:last-child
12-30 2038
【代码】CSS中的:nth-child。
css选中父元素下的第一个子元素(:first-child)
11-19
前言
css--nth-child的注意点
dingbin1973的博客
03-20 208
nth-child( n ) 里面的n可以是任何整数值。 不过要取第一位开始的元素DOM对象，那么n是从1开始的 如果n值小于0或者等于0，是不会匹配任何元素，（或者超过数量）切记切记！！！！ 例子： ul 　　li 　　li 　　li /ul 匹配第一个Li写法是 ul li:nth-child(1) 其中 : 冒号前面的标签就是要找的子元素匹配标签 转载...
前端开发nth-child()注意事项
qiancute的博客
11-11 392
nth-child（m）会把所有盒子排列序号，执行的时候首先看：nth-child(m)之后在回去看前面选择的盒子
为什么first-child和las​t-child同时作用于同一类型标签时，只有first-child起作用？
weixin_44239472的博客
03-19 2462
描述： first-child和last-child同时作用于同一类型标签时，只有first-child起作用，它们的父标签都是指向body 相关截图： 相关代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:first-child{
CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
weixin_34220179的博客
07-14 90
以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。 示例代码： &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; ...
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器，如`:first-child`、`:nth-child(n)`等，你可以编写出更加优雅和高效的jQuery代码，提高网页的交互性和用户体验。
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
jQuery+css last-child实现选择最后一个子元素操作示例
10-17
此外，jQuery还提供了许多其他选择器，如`:first-child`, `:nth-child(n)`, `:even`, `:odd`等，可以根据需要灵活运用。 总之，熟练掌握jQuery和CSS选择器的使用对于提升网页开发效率至关重要。通过不断实践和学习...
react-style-components:用于样式元素的 React 组件
06-23
在制品。 向前走！ React 样式组件 用于样式元素的 React 组件。 支持的组件 伪类 hover伪元素 任何元素的通用悬停样式 链接相关的伪类选择器 ...:first-letter ... :nth-last-child(N) :only-of-type
CSS中的:first-child和:last-child作用不显示的问题（解决方法）
weixin_49122171的博客
10-03 2122
CSS中的:first-child和:last-child作用不显示的问题（解决方法）
常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()
Wod_7的博客
05-22 2008
在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。
有关 :first-child的理解
热门推荐
师兄阿离的博客
10-29 2万+
最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。 在W3School里面讲   ：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内...
:first-child与:first的区别
靓靓软件工作室
03-30 176
在jQuery的子元素过滤选择器中，:first-child的使用需要注意一点，文档中说的例子是这样用的：$("ul li:first-child").addClass("highlight");它实现的作用是获取到所有ul下面的第一个li元素，与:first有区别。$("ul li:first").addClass("highlight");:first只获取一个ul中的第一个li，前提都是页面...
vue3 :first-child和:last-child的使用
smileKH的博客
04-07 930
first-child和:last-child的巧妙使用。这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！
选择器的使用(nth-child和nth-last-child选择器)
weixin_33695082的博客
10-07 232
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style...
css伪类first-child,last-child,写在当前要选择的标签上
最新发布
Frank_colo的博客
09-05 118
【代码】css伪类first-child,last-child,写在当前要选择的标签上。
css不是第一个child,css中first-child和last-child不生效
weixin_39970166的博客
08-03 1120
html 代码v-if="userInfo.url" />style="backgroundColor:#87d068" icon="user" />v-if="!hasUserInfos()"@click="login">登录v-for="(item, index) in userInfo.infos":key="index">{{item.title}}：{{item....
:first-child不生效问题
Anyuegogogo的博客
12-02 1362
:first-child不生效问题
CSS3.0金矿：深入理解:first、:last与:nth-of-type选择器
`:first`和`:last`并不是标准的CSS3选择器，可能是开发者自定义的或者拼写错误，正确的可能是`:first-child`和`:last-child`，它们分别匹配元素的第一个或最后一个子元素，而非类型相同的子元素。 `:first-of-type`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值