【HTML】CSS子类选择器

最新推荐文章于 2023-06-22 21:35:09 发布

文思月

最新推荐文章于 2023-06-22 21:35:09 发布

阅读量3.6k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44366571/article/details/101919756

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS的伪子类选择器

first-child:

定义： 可以选中第一个子类元素（在所有的元素中，选中的元素必须是第一个子元素）
语法： 元素：first-child{}

last-child:

定义： 可以选中最后一个子类元素（在所有的元素中，选中的元素必须是最后一个子元素）
语法： 元素：last-child{}

nth-child:

定义： 可以选中任何一个子类元素（在所有的元素中，选中的元素符合所有元素排序的顺序）
语法： 元素：first-child（选中孩子的序号）{}
选中的序号：如果是even选中的是所以偶数的子元素
odd是选中奇数的子元素

first-of-type:

定义： 可以选中第一个子类元素（当前的元素中的第一个子元素）
语法： 元素：first-of-type{}

last-of-type:

定义： 可以选中最后个子类元素（当前的元素中的最后一个子元素）
语法： 元素：first-of-type{}

nth-of-type:

定义： 可以选中任何一个子类元素（当前的元素中的任何一个子元素）
语法： 元素：first-of-type{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type = "text/css">
    /* p:first-child{*/
    /*  background-color: blue;*/
    /*}*/
    /*p:last-child{*/
    /*  background-color: purple;*/
    /*}*/
    /*p:nth-child(2){*/
    /*  color: blueviolet;*/
    /*}*/
    /*p:nth-of-type(2){*/
    /*  background-color: blue;*/
    /*}*/
    /*p:first-of-type{*/
    /*  background-color: blue;*/
    /*}*/
    p:last-of-type{
      background-color: blue;
    }

  </style>
</head>
<body>
<div>
  <span>hahaha</span>
  <p>我是一只猫</p>
  <p>我是一只猫</p>
  <p>我是一只猫</p>
  <div><p>我是一只猫</p></div>


</div>
</body>
</html>

文思月

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【HTML】CSS子类选择器

CSS的伪子类选择器first-child:定义：可以选中第一个子类元素（在所有的元素中，选中的元素必须是第一个子元素）语法：元素：first-child{}last-child:定义：可以选中最后一个子类元素（在所有的元素中，选中的元素必须是最后一个子元素）语法：元素：last-child{}nth-child:定义：可以选中任何一个子类元素（在所有的元素中，选中的元素...
复制链接

扫一扫