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. mapreduce将key相同的value结合在一起_个人理解Hadoop中MapReduce
  2. 有特殊步长适应的自适应差分脉码调制语音编码系统
  3. xhost display 详解
  4. 在java中使用SPI创建可扩展的应用程序
  5. 等式约束的序列二次规划(SQP)
  6. mysql sillyr x.so_mysql2.so:libmysqlclient_r.so.15:无法打开共享对象文件:没有这样的文件或目录...
  7. EularProject 39:给周长推断构成直角三角形个数
  8. Hexo+Github博客搭建教程
  9. python绘制直方图显示数字_Python | 数据可视化汇总
  10. 讲一下创业公司的技术架构演进
  11. java邮件群发代码_基于jsp的邮件群发系统-JavaEE实现邮件群发系统 - java项目源码...
  12. HTML:桂林山水风景Web界面设计
  13. 常说的LDO电路是啥?(简单版)
  14. Iphone开发(七)date picker 和 picker view,较复杂的控件
  15. 什么是 metaprogramming
  16. 电脑怎么重装系统?超简单小白一键重装教程
  17. mysql之行列转换
  18. 服务器系统上1068错误,错误1068,教您启动网络服务错误1068怎么解决
  19. 傅里叶展开锯齿波形图
  20. TCL/TK文件操作

热门文章

  1. 问卷星/问卷管理系统的设计与实现,附源码+开发环境【优质毕设】
  2. 本周 火火火火 的开源项目!
  3. 2021年资料员-岗位技能(资料员)考试题及资料员-岗位技能(资料员)试题及解析
  4. Tryhackme-Threat and Vulnerability Management
  5. tinyxml2存储xml数据简单高效
  6. 浅析无线网络数据窥探技术
  7. 2019年web前端学习路线与前端书籍学习
  8. 计算机毕设Python+Vue杨柳农贸市场摊位管理系统(程序+LW+部署)
  9. 规则引擎Aviator实践分享
  10. 如何构建自己的投资体系--做一个笨小孩