CSS伪类选择器使用实例

最新推荐文章于 2023-06-29 17:29:19 发布

Mentina

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量2.8k

点赞数

文章标签： first-of-type first-child nth-child only-child css伪类选择器

本文链接：https://blog.csdn.net/qq_33740308/article/details/79553151

版权

今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~

每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~

这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)

//======================================================

实例用到的html结构

<body>
   <div id="outer">
      <h1>我是h1,父div中的第一个子元素</h1>
      <p>我第一个p元素，父div中的第二个子元素</p>
      <p>我是第二个p元素，父div中的第二个子元素</p>
      <hr>
      <div id="inner">
         <h2>我是h2，子div1中的第一个子元素</h2>
         <p>我是第一个p元素，子div1中的第二个子元素</p>
         <p>我是第二个p元素，子div1中的第三个子元素</p>
         <p>我是第三个p元素，子div1中的第四个子元素</p>
      </div>
      <hr>
      <div>
         <p>我是第一个p元素，子div2中的第一个子元素</p>
         <p>我是第二个p元素，子div2中的第二个子元素</p>
      </div>
      <hr>
      <div>
         <h2>我是h2，子div3的第一个子元素</h2>
         <p>我是唯一p元素，子div3的第二个子元素</p>
      </div>
      <hr>
      <div>
         <p>我是唯一p元素，子div4中唯一一个子元素</p>
      </div>
   </div>
</body>

一、p:first-of-type —— 该父元素中，所有p子元素中的第一个；

（1）直接使用，所有div标签中第一个p元素变色

（2）与p:first-child的区别

p:first-child 要求是第一个元素,且类型必须为p

二、p:last-of-type ——该父元素中，所有p子元素中的最后一个；

与first-of-type类似

三、p:only-of-type——父div下，只有一个p标签的元素；有无其他标签无所谓，只要保证只有一个p

（1）直接使用

（2）与p:only-child的区别：

p:only-child 要求是div的唯一p元素，并且必须只有这一个元素

四、p:nth-child(2)——父元素的第2个子元素，且该子元素为p标签

//========================================

总结

xxx-child有两个条件：子元素在父元素中的位置 + 元素类型

xxx-of-type只有一个条件：该类子元素中的位置

Mentina

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS伪类选择器使用实例

今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~ 每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~ 这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)//============================================...
复制链接

扫一扫