CSS-子元素选择器

王十四兄

已于 2023-01-02 14:34:04 修改

阅读量3.8k

点赞数 2

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

于 2022-10-30 12:46:06 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127598184

版权

css 专栏收录该内容

44 篇文章

订阅专栏

子元素选择器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      /*body > p:first-child {
        background-color: yellow;
      }
      p:last-child {
        background-color: yellow;
      }
      p:nth-child(odd) {
        background-color: yellow;
      }
      p:first-of-type {
        background-color: yellow;
      }*/
      p:last-of-type {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <span>我是span</span>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>hello</span>
  </body>
</html>

请添加图片描述

属性

:first-child

可以选中第一个子元素

body > p:first-child {
  background-color: yellow;
}

:last-child

可以选中最后一个子元素

p:last-child {
  background-color: yellow;
}

:nth-child

可以选中第一个子元素

该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素

p:nth-child(odd) {
  background-color: yellow;
}

其他
- :first-of-type
- :last-of-type
- :nth-of-type

和:first-child 这些非常的类似
只不过 child，是在所有的子元素中排列
而 type，是在当前类型的子元素中排列

p:first-of-type {
  background-color: yellow;
}
p:last-of-type {
  background-color: yellow;
}