:last-of-type | CSS属性参考

2024-04-18 16:06:31

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属性参考相关推荐

html left属性,CSS属性参考 | left
CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...
html css checked,:checked | CSS属性参考
CSS :checked伪类用于匹配被用户选中的单选按钮Radio或复选按钮checkbox. :checked伪类用于匹配页面中的,或,或在元素中的选项,当这些元素处于选中状态时,就会被添加:che ...
css中的inset,inset() | CSS属性参考
CSS inset()函数是一个图形函数,用于指定某种基本图形类型.inset()函数用于定义矩形. CSS 代表一种基本图形,它通过图形函数来定义一个图形.一个基本图形可以作为shape-outsi ...
html5语法参考图片,CSS属性参考 | background-image
background-image属性用于为元素设置一个或多个背景图像,多个背景图像使用逗号来分隔. background-image属性用于为某个元素设置一个或多个背景图像,各个背景图像以堆叠的方式逐 ...
html visibility属性,CSS属性参考 | visibility
CSS visibility 属性用于隐藏一个元素. CSS visibility属性用于隐藏一个元素.当取值为hidden时用于隐藏非表格元素,当取值为collapse时用于隐藏表格行或列. 使用v ...
html的text-decoration,CSS属性参考 | text-decoration
CSS text-decoration 属性用于设置文本的装饰线(下划线.上划线和删除线),或移除已有的文本装饰线. 在CSS3中,text-decoration属性是text-decoration- ...
html5 text align,CSS属性参考 | text-align
CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式. CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式.虽然这个属性 ...
css after html,::after | CSS属性参考
CSS ::after伪元素用于在被选择的元素之后插入由content属性指定的内容. ::after伪元素是一个虚拟元素,它默认是内联元素.它通常配合content属性来一起使用,content属性 ...
css3 border-style,CSS属性参考 | border-style
在CSS中有9种预定义的边框样式,这些边框样式与9个边框关键字一一对应. border-style属性的值可以设置为一个,两个,三个或四个. 如果为border-style属性设置了一个值,那么元素的 ...
html5文本缩进元素,CSS属性参考 | text-indent
CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格.也就是通常所说的首行文本缩进. 在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观, ...

最新文章

热门文章