only-child、only-of-type、nth-child、 nth-of-type

最新推荐文章于 2024-08-18 22:35:37 发布

qiuqiu1894

最新推荐文章于 2024-08-18 22:35:37 发布

阅读量933

点赞数 1

分类专栏： web前端 CSS 文章标签： css

本文链接：https://blog.csdn.net/qiuqiu1894/article/details/107663181

版权

本文详细解释了CSS中的四个选择器：only-child、only-of-type、nth-child及其变体，包括它们的选取条件和应用场景。only-child选择器用于选取父元素下的唯一子元素；only-of-type则关注同类型的唯一元素。nth-child(n)选取父元素下的第n个子元素，而nth-last-child(n)则是从后向前计数。last-of-type和first-child分别对应最后和第一个指定类型的元素。同样，nth-of-type(n)和nth-last-of-type(n)针对的是指定类型的元素。

摘要由CSDN通过智能技术生成

先从最不容易理解的only-child，only-of-type说起吧，理解这两个后面的都好理解了。

1. only-child

选取条件：需要有父元素（不包含body元素），父元素下只有一个元素，且该唯一个元素为指定元素。

a:only-child{
   
color:blue;
}

<body>
<div>
  <div>
 	 <a>a标签1</a>
  </div>
</div>

<div>
  <div>
    <a>a标签2</a> // 不满足“父元素下只有一个元素”条件
    <p>p标签</p>
  </div>
</div>

<div>
  <div>
    <a>a标签3</a> // 不满足“唯一个元素为指定元素”条件
    <a>a标签4</a> // 同上
  </div>
</div>

<a>a标签5</a>  // 不满足“有父元素（不包含body元素）”条件
&l

最低0.47元/天解锁文章

qiuqiu1894

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
only-child、only-of-type、nth-child、 nth-of-type

先从最不容易理解的only-child，only-of-type说起吧，理解这两个后面的都好理解了。only-child选取条件：需要有父元素（不包含body元素），父元素下只有一个元素，且该唯一个元素为指定元素。a:only-child{color:blue;}<body><div> <div> <a>a标签1</a> </div></div><div> <div&
复制链接

扫一扫

专栏目录