结构性伪类选择器—last-child

最新推荐文章于 2022-06-20 13:42:02 发布
最新推荐文章于 2022-06-20 13:42:02 发布
阅读量622 收藏
点赞数

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

ul>li:last-child{background:blue;}

示例演示

在博客的排版中，每个段落都有15px的margin-bottom，假设不想让博客“post”中最后一个段落不需要底部的margin值，可以使用“:last-child”选择器。

HTML代码：

<div class="post">
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
  <p>第四段落</p>
  <p>第五段落</p>
</div>​

CSS代码：

.post {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin: 20px auto;
}
.post p {
  margin:0 0 15px 0;
}

.post p:last-child {
  margin-bottom:0;
}

演示结果：

 

任务

在CSS编辑器的第十四行输入正确的代码，删除列表中最后一个列表项的底部边框。

<!DOCTYPE www.dztcsd.comhtml>
<html>
<head> 
<meta charset="utf-8">
<title>结构伪类选择器——last-child</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item5</li>
  <li>Item6</li>
</ul>
</body>
</html>

大志天成119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中:last-child选择器用法实例
10-24
`:last-child`选择器的语法结构相当简单，如下所示： ```javascript $:last-child ``` 这里的`$`代表jQuery的选择器，`:last-child`就是我们要讨论的关键部分，表示我们要选取的是父元素的最后一个子元素。这个...
CSS3结构性伪类选择器九种写法
09-25
### CSS3结构性伪类选择器详解 随着前端技术的发展，CSS3为我们提供了更多灵活的选择器，使得网页布局和样式设计变得更加高效与便捷。其中，结构性伪类选择器是一组非常实用的功能，它允许我们根据元素在文档树中的...
css3结构性伪类选择器--last-child
weixin_39093202的博客
01-10 729
“:last-child”选择器与“:first-child”选择器作用类似， 不同的是“:last-child”选择器选择的是元素的最后一个子元素。 例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul&gt;li:last-child{background:blue;} 示例演示 在博客的排版中，每个段落都有15px的margin-bottom，假设不想让...
css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child()，only-child
SBTR123456的博客
12-20 604
1 element:first-child 选择属于其父元素的首个子元素的element元素 注意：div:first-child 必须是其父元素下面的第一个子元素且必须是div元素才能匹配的到 匹配结果： 2 同理：element:last-child 指定其父元素的最后一个子元素的element元素 注意：div:last-child 代表其父元素的...
【CSS3】---结构性伪类选择器-first-child+last-child
weixin_30374009的博客
07-09 187
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href="...
css3结构伪类选择器--first-child
weixin_39093202的博客
01-10 1065
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。 简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色 HTML代码： &lt;ol&gt; &lt;li&gt;&lt;a href="##"&gt;Link1&lt;/a&gt;&lt;/...
CSS3选择器--结构性伪类选择器
热门推荐
Wendy
01-01 2万+
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名                  常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器       C
js学习-结构性伪类选择器
sjpgyy的博客
06-02 258
js学习-结构性伪类选择器 选择器first-child、last-child、nth-child和nth-last-child 1）first-child 单独指第一个子元素的样式 2）last-child 单独指最后一个子元素的样式 3）nth-child nth-child（n）匹配正数下来第N个子元素 nth-child (odd) 匹配正数下来第奇数个子元素 nth-child (even) 匹配正数下来第偶数个子元素 <style> li:first-chil
CSS3---结构性伪类选择器—last-child
diyinjiao1404的博客
05-04 213
结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul>li:last-child{background:blue;} 示例演示 在博客的排版中，每个段落都有...
first-child伪类选择器没有效果(不起作用)
xjun0812的博客
07-31 6280
我们在开发时，经常会使用到结构性伪类选择器，如 first-child（选择第一个子元素），但有时候并没有效果怎么办？ 这时候你可以检查一下该元素是否有其他兄弟元素。因为当父元素的第一个子元素类型和该元素不同时，会失效。 场景举例： <!--内容部分--> <div class="fruits"> <h3>热销水果</h3> ...
【CSS】结构伪类选择器
德仔
06-20 1344
结构伪类选择器 上图中，我们很清楚的看到了那些属于同级，first-of-type 是要找到同级的第一个，所以 div1、div2、div5 是符合要求的，所以“456” “ 789”’ “唯一的”会发生样式变化。 解析：如上代码中，我们给 p 标签和 div 标签都设置了 only-of-type，但是只有 p 标签的起作用了。为什么？因为上述代码中存在多个 div。所以这个选择选择器一定要注意唯一性。...
CSS中的属性选择符和结构化伪类
09-24
3. **`:nth-child(n)`**：这是一个更灵活的选择器，可以选取父元素的第n个子元素。`n`可以是数字、关键词（如`odd`或`even`）或者公式（如`an+b`）。例如，`li:nth-child(3)`会选择每个列表项中的第三个元素。 ```...
HTML5&CSS3网页制作：结构化伪类选择器.pptx
05-31
通过熟练掌握这些结构化伪类选择器，开发者可以创建更加动态、响应式的网页，同时减少不必要的JavaScript代码，提升页面性能。在实际应用中，结合其他CSS3特性如动画和过渡，可以实现更加丰富和精细的界面设计。
jQuery 关于伪类选择符的使用说明
10-27
jQuery选择器是...总的来说，jQuery的伪类选择符扩展了CSS选择器的功能，使得开发者能够更加高效地处理DOM结构，进行精准的样式应用和事件绑定。熟练掌握这些选择符，将极大地提升jQuery编程的效率和代码质量。
mpu6050陀螺仪使用方法开发教程文档.docx
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
唯美淡雅四页.zip
最新发布
07-30
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
结构伪类选择器 scss
11-08
常见的结构伪类选择器包括:first-child、:last-child、:nth-child等。例如，:nth-child(2n)表示选择每隔一个元素的偶数元素。而SCSS是一种CSS预处理器，它可以让开发者使用类似编程语言的方式来编写CSS，包括变量、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值