首页 > Web开发 > 详细

CSS选择器(4)——结构伪类选择器

时间:2020-06-12 11:03:48      阅读:60      评论:0      收藏:0      [点我收藏+]

结构伪类选择器可以根据元素在文档中的某些特性定位到它们,也就是说,通过文档树结构的相互关系来匹配特定的元素,从而减少HTML文档对ID或者类名的定义,保持代码干净和整洁。

结构伪类选择器

E:first-child

E为父元素的第一个子元素,否者匹配不成功。与nth-child(1)等同。

p:first-child i
{
background:yellow;
}

选择每个 <p> 中的每个 <i> 元素并设置其样式,其中的 <p> 元素是其父元素的第一个子元素。

E:last-child

E为父元素的最后一个子元素,否者匹配不成功。与nth-last-child(1)等同。

p:last-child
{ 
background:#ff0000;
}

E:nth-child(n)

用法同上,n从1开始。

E:nth-last-child(n)

用法同上,n从1开始。

E:first-of-type

选择父元素内具有指定类型为E的第一个E元素,与E:nth-of-type(1)相同

p:first-of-type
{
background:#ff0000;
}

E:last-of-type

选择父元素内具有指定类型为E的最后一个E元素,与E:nth-last-of-type(1)相同

p:first-of-type
{
background:#ff0000;
}

E:nth-of-type(n)

用法同上,n从1开始。

E:nth-last-of-type(n)

用法同上,n从1开始。

E:only-child

选择父元素只包含一个子元素,且该子元素是E元素。

E:only-of-type

选择父元素只包含一种类型的元素,且该类型是E。

E:only

选择没有子元素的父元素,并且该元素也不包含任何文本节点。

CSS选择器(4)——结构伪类选择器

原文:https://www.cnblogs.com/10yearsmanong/p/13097389.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!