CSS :first-child 选择器

最新推荐文章于 2024-12-13 14:38:12 发布
最新推荐文章于 2024-12-13 14:38:12 发布
阅读量222 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35795555/article/details/114067261
版权

css 样式调整的时候经常遇到，首个元素或最后一个元素需要特殊处理样式的需求。 可以用到CSS 的 first-child、last-child选择器。
在这里插入图片描述

在上面基础上，我想从li中几个button里面，第一个button需要设置特殊样式。
在这里插入图片描述

【CSS3】结构性伪类选择器—first-child
O(∩_∩)O
02-23 804
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： Link1 Link2 link3 CSS代码： ol > li{ font-size:
CSS3---结构性伪类选择器—first-child
diyinjiao1404的博客
05-04 438
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href=...
那些年踩过的坑之:first-child伪类选择器
andrew1989121的博客
06-08 272
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school 嗯，乍一看好像说的不是很明白，因此这个选择器很容易让人误解，通常会有两种误解：误解一：认为E:first-child选中E元素的第一个子元素。误解二：认为E:first-child选中E元素的父元素的第一个E元素。 你是不是也曾这样理解这个选择器或者现在仍然这样理解？以上两种理解都...
css选择器（2)
最新发布
TwTang_的博客
12-13 1393
文章目录一、结构伪类first-child1.1基本用法语法：代码：效果：二、结构伪类last-child语法：代码：效果：三、结构伪类nth-child语法：代码：效果：3.1 n的倍数代码：效果：3.2 偶数even代码：效果：3.3 奇数odd代码：效果：3.4 选中前几个代码：效果:3.5 公式写法代码：效果：3.6 first-of-type代码：效果：3.7 last-of-type代码：效果：3.8 nth-of-child代码：效果：四、结构伪类nth-last-child语法：代码：效果：
深入理解CSS中的:first-child与:first-of-type选择器
My_wife_QBL的博客
07-11 1423
选择作为其父元素的第一个子元素的元素。：选择作为其父元素的第一个指定类型的子元素的元素。和是CSS中常用的伪类选择器，它们在选择元素时具有不同的行为和应用场景。理解这些区别有助于开发者在实际项目中选择合适的选择器来实现所需的样式效果。：适用于需要选择父元素的第一个子元素的场景，但需要注意它必须是父元素的第一个子元素。：适用于需要选择父元素中同类型子元素中的第一个的场景，可以跨越不同类型的子元素。希望本文能为大家提供一个清晰的理解和实用的指导，帮助大家在实际开发中更好地应用和选择器。
css中选取子元素
生存不忘生活
08-08 5936
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
css的first-child
dre的博客
03-09 651
last-child css属性。
CSS选择器之:first-child,:last-child
爪哇犀牛
08-24 3633
定义 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。 提示：p:last-child 等同于 p:nth-first-child(1)。 :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 提示：p:last-child 等同于 p:nth-last-child(1)。 直接看定义稍微有点绕，定义中最关键的就是属于其父元素。如果不能...
[CSS] first-child选择器的一点理解
weixin_43261523的博客
05-22 6246
在W3school上的解释是这样的： first-child选择器：选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式： p:first-child { background-color: yellow; } 这很容易产生一种误解，认为p:first-child是选中p元素的第一个子元素。 举例说明： <div> <p>标题1的第一段</p> <p>标题1的第二段</p> </div>
CSS选择器之div:first-child&div :first-child
热门推荐
weixin_44249574的博客
07-30 1万+
div:first-child&div :first-child的区别 div:first-child属于组合选择器 既满足是div元素，又满足是父级元素的“第一个孩子”，至于父级元素是谁，无所谓。 div :first-child属于后代选择器 必须是div元素的“第一个孩子”，父级元素明确要求是div元素，至于“第一个孩子”是什么元素，无所谓。 div:first-child <!DOCTYPE html> <html lang="en"> <head>
区分css选择器-:first-child 与:first-of-type
bikeRiver
11-20 134
<!DOCTYPE html> <html> <head> <style> /*嫡长子 第一个子元素是p的*/ p:first-child { background-color:yellow; } /*第一个嫡子 子元素中的第一个p*/ p:first-of-type { color:red; } </style> </head&...
css选中父元素下的第一个子元素(:first-child)
11-19
在CSS（层叠样式表）中，`:first-child`伪类选择器是一个非常有用的工具，它允许我们选择并应用样式给父元素下的第一个子元素。然而，在实际使用中，可能会出现一些误解，导致预期效果与实际效果有所偏差。本文将...
flex布局中用 :first-child选择器
imkaifan的博客
06-30 302
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 6047
一、CSS3 结构伪类选择器 二、E:first-child / E:last-child 选择器 1、E:first-child 选择器 2、E:last-child 选择器 三、E:nth-child(n) 选择器 1、E:nth-child(n) 选择器语法说明 2、n 为数字的情况 3、n 为关键字的情况 4、n 为公式的情况 5、子元素类型不同的情况 四、E:first-of-type / E:last-of-type / E:nth-of-type 选择器
选择器的使用(first-child和last-child选择器)
weixin_33962923的博客
10-07 159
<!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...
常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()
Wod_7的博客
05-22 2492
在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。
浅谈jquery选择器 :first与:first-child的区别
10-21
与此不同，`:first-child`是CSS标准选择器，它选择的是其父元素的第一个子元素。所以，当使用`$("ul li:first-child")`时，它会返回每个`ul`元素下的第一个子元素，即`John`和`Glen`。`:first-child`关注的是元素在...
css first-child伪类选择器详解
weixin_44607531的博客
01-26 1万+
三种使用情况 p:first-child 选中同级第一个并且为p的元素 p:first-child em 选中同级第一个并且为p的元素下的em元素 p em:first-child 选中所有p元素下，同级第一个且为em的元素 first-child 代码 <style> p:first-child{ /* 同级第一个并且为p的元素 */ color: red; } </style> <body> ...
关于CSS伪类first-child的深入理解
mirro81的博客
07-21 1774
关于CSS伪类first-child的深入理解在CSS（CSS3）中，有一种选择器很特殊，那就是伪类，关于伪类有很多，这里详细分析其中的一种：first-child。具体书写格式如下： element：first-child{（CSS语句）}关于这个伪类，可能很多人都会对它有一个误解，那就是字面上的误解：以为是element的第一个子元素，其实这种理解是完全错误的，首先我们来看下面的代码：代码1.
nth-child选择器，选择指定的li
qq_43437571的博客
06-19 2402
有了nth-child选择器，选择指定的li时候，就不用写额外的类名，如下： ul li { width: 20px; height: 20px; background-color: red; margin-bottom: 10px; list-style: no...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值