CSS :last-of-type伪类选择器用于匹配属于其父元素的特定类型的最后一个子元素的每个元素。

换句话来说,:last-of-type伪类选择器匹配父元素中最后一次出现的某类子元素,例如:

< article >
   < h1 >标题</ h1 >
   < p >
     第一个段落...
   </ p >
   < p >
     第二个段落...
   </ p >
</ article >

如果使用下面的CSS规则来添加样式,那么第二个段落的文字大小将被修改:

p:last-of-type {
     font-size : 2em ;
}

示例代码

假如你有一段这样的HTML代码:

< div class = "container" >
     < h1 >标题</ h1 >
     < nav >
         < ul >
             < li >列表项一</ li >
             < li >列表项二</ li >
             < li >列表项三</ li >
             < li >列表项四</ li >
         </ ul >
     </ nav >
     < article >
         < h2 >标题</ h2 >
         < p >
             段落内容... < a href = "#" >超链接1</ a >... < a href = "#" >超链接2</ a >
         </ p >
         < p >
             段落内容...
         </ p >
     </ article >
     < article >
         < h2 >标题</ h2 >
         < p >
             段落内容...
         </ p >
         < p >
             段落内容...
         </ p >
     </ article >
</ div >

下面的代码会匹配.container容器中的最后一个article元素。

article:last-of-type {
     background-color : #eee ;
     border : 1px solid #ddd ;
}

下面的代码会匹配所有article元素的最后一个p段落。

p:last-of-type {
     font-weight : bold ;
}

下面的代码通过::after伪元素来为最后一个超链接元素设置样式。

a:last-of-type {
     color : deepPink;
}
a:last-of-type::after {
     content : "(" attr (href) ")" ;
     color : deepPink;
}

在线演示

下面的例子是上面代码的实际效果。

标题

  • 列表项一
  • 列表项二
  • 列表项三
  • 列表项四

标题

段落内容... 超链接1... 超链接2

最后一个段落内容被设置为粗体字...

标题

段落内容...

最后一个段落内容被设置为粗体字...

浏览器支持

所有的现代浏览器都支持:last-of-type伪类选择器,包括:Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。

:last-of-type | CSS属性参考相关推荐

  1. html left属性,CSS属性参考 | left

    CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...

  2. html css checked,:checked | CSS属性参考

    CSS :checked伪类用于匹配被用户选中的单选按钮Radio或复选按钮checkbox. :checked伪类用于匹配页面中的,或,或在元素中的选项,当这些元素处于选中状态时,就会被添加:che ...

  3. css中的inset,inset() | CSS属性参考

    CSS inset()函数是一个图形函数,用于指定某种基本图形类型.inset()函数用于定义矩形. CSS 代表一种基本图形,它通过图形函数来定义一个图形.一个基本图形可以作为shape-outsi ...

  4. html5语法参考图片,CSS属性参考 | background-image

    background-image属性用于为元素设置一个或多个背景图像,多个背景图像使用逗号来分隔. background-image属性用于为某个元素设置一个或多个背景图像,各个背景图像以堆叠的方式逐 ...

  5. html visibility属性,CSS属性参考 | visibility

    CSS visibility 属性用于隐藏一个元素. CSS visibility属性用于隐藏一个元素.当取值为hidden时用于隐藏非表格元素,当取值为collapse时用于隐藏表格行或列. 使用v ...

  6. html的text-decoration,CSS属性参考 | text-decoration

    CSS text-decoration 属性用于设置文本的装饰线(下划线.上划线和删除线),或移除已有的文本装饰线. 在CSS3中,text-decoration属性是text-decoration- ...

  7. html5 text align,CSS属性参考 | text-align

    CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式. CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式.虽然这个属性 ...

  8. css after html,::after | CSS属性参考

    CSS ::after伪元素用于在被选择的元素之后插入由content属性指定的内容. ::after伪元素是一个虚拟元素,它默认是内联元素.它通常配合content属性来一起使用,content属性 ...

  9. css3 border-style,CSS属性参考 | border-style

    在CSS中有9种预定义的边框样式,这些边框样式与9个边框关键字一一对应. border-style属性的值可以设置为一个,两个,三个或四个. 如果为border-style属性设置了一个值,那么元素的 ...

  10. html5文本缩进元素,CSS属性参考 | text-indent

    CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格.也就是通常所说的首行文本缩进. 在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观, ...

最新文章

  1. LeetCode简单题之设计停车系统
  2. python 将列和索引的值变换_【编辑小组成长日记】Python学习第二期
  3. 关于Quartz的Job 不能被注入以及SpringAop对Job失效
  4. 关于智能车竞赛总结 | 山东大学(威海) - 山魂五队
  5. Python-OpenCV 处理图像(一):基本操作
  6. Pycharm详细安装教程
  7. java assetmanager_AssetManager asset的使用
  8. vim--之初学轻松几步走
  9. 设置mac的全局命令
  10. 在ASP.NET 中实现单用户登录(利用Cache, 将用户信息保存在服务器缓存中)[转]
  11. python实现目标检测_由浅入深:教你如何构建一个行人目标检测模型(Python)
  12. 想了解表格问答,我们先看看TA的前世
  13. php链接文字变色,Linux_不断变色的文字,不断变色的文字效果,漂亮而 - phpStudy...
  14. python的集合类型_python集合类型
  15. 自然语言处理能够把全网内容组织到什么程度?
  16. ×××全功能邮件系统(6)
  17. WebService原理
  18. 尚硅谷YYDS (视频连接)
  19. 计算机表格中减法公式,excel表格减法公式
  20. physx中ray不碰撞某些物体的方法

热门文章

  1. Mybatis中的Criteria条件查询
  2. JAVA实现视频加密
  3. [Asp.net]常见word,excel,ppt,pdf在线预览方案,有图有真相,总有一款适合你!...
  4. 很有趣的互联网势力割据图
  5. Spring5——AOP
  6. 从特斯拉刹车失败案例看AI自动化
  7. windows系统下SNMP协议获取系统内存、CPU实例代码
  8. rhel8 rhel-8.0-x86_64-dvd.iso
  9. 如何成为HIL测试工程师
  10. 大量数据的存储与引用