CSS :first-child 选择器

最新推荐文章于 2024-05-23 17:56:03 发布
最新推荐文章于 2024-05-23 17:56:03 发布
阅读量139 收藏
点赞数
分类专栏： 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需要设置特殊样式。
在这里插入图片描述

weixin_35795555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中:first-child选择器用法实例
12-08
本文实例讲述了jQuery中:first-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器能够匹配父元素的第一个子元素。 语法结构: 代码如下:$(“:first-child”) 此选择器一般也要和其他选择器配合使用，...
CSS :first-child 选择器 和 HTML DOM firstChild 属性
diaojilu3861的博客
11-21 138
CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式： p:first-child { background-color:yellow; } 亲自试一试 浏览器支持 IEFirefoxChromeSafariOpera 所有主流浏览器都支持 :...
jquery选择器
qq_43919485的博客
07-11 287
1、普通选择器 $(this)选择当前html元素 $(“p.intro”) 选取class为intro的元素 $(“p:first”) 选取第一个元素 $(“ul li:first”) 选取第一个元素的第一个元素 $(“ul li:first-child”) 选取每个元素的第一个元素 $("[herf]") 选取带有herf属性的元素 $(“a[target=’_blank’]”) 选取所有target属性等于"_blank"的元素 $(“a[targe!t=’_blank’]”) 选取所
JQuery选择器的分类详解说明
上善若泪
09-05 2462
目录 1 基本选择器 1.1 CSS选择器 1.1.1 标签选择器 1.1.2 ID选择器 1.1.3 类选择器 1.1.4 通用选择器 1.1.5 群组选择器 1.2 层级选择器 1.2.1 子元素选择器 1.2.2 后代选择器 1.2.3 紧邻同辈选择器 1.2.4 相邻同辈选择器 1.3 表单域选择器 1.3.1 :input选择器 1.3.2 :text选择器...
jQuery01-入门-选择器
qq_73126462的博客
04-09 89
3.1.1.下载jQuery库 开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js。3.1.2.生产版本：jquery-3.3.1.min.js。3.使用jQuery步骤。
CSS 简单的元素定位
u014174132的博客
05-02 393
CSS 元素定位 id属性定位：前边加#，表示id属性定位 #edui20_body class属性定位：前边加,，表示class属性定位 .edui20_body 绝对路径定位：>或空格表示层级关系 html>body>div>div html body div div 或者直接输入标签名，也是绝对径搜索 指定属性定位： 一个属性定位：input[type=‘text’...
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 5497
一、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 选择器
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> ...
CSS3---结构性伪类选择器—first-child
diyinjiao1404的博客
05-04 378
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href=...
[CSS] first-child选择器的一点理解
weixin_43261523的博客
05-22 5956
在W3school上的解释是这样的： first-child选择器：选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式： p:first-child { background-color: yellow; } 这很容易产生一种误解，认为p:first-child是选中p元素的第一个子元素。 举例说明： <div> <p>标题1的第一段</p> <p>标题1的第二段</p> </div>
CSS3的first-child选择器实战攻略
09-24
主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下
浅谈jquery选择器 :first与:first-child的区别
11-29
first-child表示（每个父元素的）第一个 $(‘ul li:first’) 返回john所在的li。 查找所有ul下第一个li元素 $(“ul li:first-child”) 返回 john glen。 查找每个ul下第一个元素是li元素dom元素。 扩展用法：$(...
CSS:浏览器特定选择器介绍
01-19
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{}IE 7 以下 *:first-child html {} * html {}只对IE 7 *:first-child html {}只对IE 7 和现代浏览器 html>body {}只对...
关于CSS伪类first-child的深入理解
mirro81的博客
07-21 1655
关于CSS伪类first-child的深入理解在CSS（CSS3）中，有一种选择器很特殊，那就是伪类，关于伪类有很多，这里详细分析其中的一种：first-child。具体书写格式如下： element：first-child{（CSS语句）}关于这个伪类，可能很多人都会对它有一个误解，那就是字面上的误解：以为是element的第一个子元素，其实这种理解是完全错误的，首先我们来看下面的代码：代码1.
纯CSS实现button按钮
weixin_48463527的博客
12-03 1万+
纯CSS实现button按钮
CSS3制作button
ns2250225
10-30 940
看完http://www.w3cplus.com/css3/icon-buttons-with-css3-html-entities的文章 立刻想制作一系列的按钮，:D 开始： 1.在Html的body中加入 Button 然后在css文件中新建类button： .button { display: inline-block; white-space:
css first-child,css :first-child选择器使用实例详解
weixin_39869593的博客
08-03 1545
css :first-child介绍css:first-child设置父元素的第一个子元素的样式表属性，即匹配父元素的第一个子元素，并为其设置css样式。例如：一个div中包括多个p元素，匹配第一个p元素可使用:first-child伪类语法：:first-child {style properties}比如：body *:first-child {font-weight: bold;}p:fi...
CSS的选择器 :first-child和:last-child
Learning_xzj的博客
08-21 7985
转载！！！原文地址：https://blog.csdn.net/weixin_44710964/article/details/104502602?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.control&spm=1001.2101.3001.4242 last-child选择器查了下W3C的文档发现我想的没那么简单。 就拿:last-child举例，文档中对其的解释是：
CSS常用的两种定位方式
最新发布
代码有点萌的博客
05-23 404
relative定位是相对自身原始位置进行偏移。absolute定位是相对于最近的已定位（relativeabsolutefixedsticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。相对自身原始位置进行偏移。元素仍占据原始位置的空间。用于微调元素位置，不会影响其他元素的布局。脱离文档流，相对于最近的已定位祖先元素进行定位。不占据空间，其他元素会忽略它的位置。用于精确定位元素，通常与relative定位的祖先元素配合使用。
:first-child 和:first-of-type
07-28
:first-child选择器匹配其父元素中的第一个子元素。例如，如果我们有以下CSS代码： p:first-child { background-color: yellow; } span:first-child { background-color: yellow; } 那么它将选择所有p元素和span元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值