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

最新推荐文章于 2021-03-24 21:33:31 发布

qiuqiu1894

最新推荐文章于 2021-03-24 21:33:31 发布

阅读量911

点赞数 1

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

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

版权

先从最不容易理解的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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

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&
复制链接

扫一扫