一文弄懂CSS` :x-child `和` :x-of-type `选择器

一、 :x-child选择器

重点在于 child 子元素,按照子元素顺序选择。

图片预览

1. :first-child

匹配同时满足以下两个条件的元素标签:

① 是div元素的第一个子元素;

② 该子元素是 p 元素。

div p:first-child
{ 
    background-color:yellow;
}

2. :last-child

匹配同时满足以下两个条件的元素标签:

① 是div元素的最后一个子元素;

② 该子元素是 p 元素。

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

3. :only-child

匹配同时满足以下两个条件的元素标签:

h2元素只有一个子元素;

② 该子元素是 span 元素。

h2 span:only-child {
  background-color: gold;
}

4. :nth-child(n)

匹配同时满足以下两个条件的元素标签:

① 元素标签的class类名为box的第三个子元素;

② 该子元素是 li 元素。

.box li:nth-child(3) {
  background-color: red;
}

5. 实例

可自行创建HTML文件,对应学习!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: antiquewhite;
    }

    /* 不生效,ul第一个子元素是 p不是li */
    .box li:first-child {
      color: yellow;
    }

    /* 只选取 ul元素下的第一个子元素是 p 的元素 */
    .box p:first-child {
      color: red;
    }

    .box li:last-child {
      color: aqua;
    }

    /* 不生效,理由同上 */
    .box p:last-child {
      color: aquamarine;
    }

    /* 只选取 span标签为 h2 标签的唯一子元素 */
    h2 span:only-child {
      background-color: gold;
    }

    /* 选取 box下的第 3个子标签 且为 li */
    .box li:nth-child(3) {
      background-color: red;
    }

    /* 不生效:选取 box下的第5个子标签 且为 li,但第五个标签为p */
    .box li:nth-child(5) {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h2>
    <span>第一个 Ul 列表 </span>
  </h2>
  <ul class="box">
    <p>0</p> <!-- 字体变红,有背景色 -->
    <li>1</li> <!-- 字体变蓝 -->
    <li>2</li>
    <li>3-1</li>
    <p>3-2</p>
    <li>4</li>
    <p>5</p>
    <li>6</li> <!-- 字体变青色,有背景色 -->
  </ul>
  <h2>
    <span>第二个 Ul 列表 </span>
    <p>p元素</p>
  </h2>
</body>
</html>

二、:x-of-type选择器

重点在于 type 类型,只在类型一致的子元素中找。

1. :first-of-type

匹配 ul元素的子元素中的第一个 li元素

ul li:first-of-type {
  background-color: rosybrown;
}

2. :last-of-type

匹配 ul元素的子元素中的最后一个 li元素

ul li:last-of-type {
  background-color: chartreuse;
}

3. :only-of-type

匹配 div元素的唯一子元素是 p元素

div p:only-of-type {
  font-size: 24px;
  color: darkblue;
}

4. :nth-of-type(n)

匹配 div元素的第二个p子元素

div p:nth-of-type(2) {
  font-size: 24px;
  color: darkblue;
}

5. 实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选取 ul元素下的第一个 li 元素 */
    .box li:first-of-type {
      background-color: rosybrown;
    }

    /* 选取 ul元素下的最后一个 li 元素 */
    .box li:last-of-type {
      background-color: chartreuse;
    }

    .box p:first-of-type {
      background-color: blueviolet;
    }

    .box p:last-of-type {
      background-color: chocolate;
    }

    /* 选取 p标签是 ulbox下唯一的 p标签 */
    .ulbox p:only-of-type {
      font-size: 24px;
      color: darkblue;
    }

    /* 样式不生效:ulbox下div标签有两个,所以样式不生效 */
    .ulbox div:only-of-type {
      font-size: 24px;
      color: royalblue;
    }

    .ulbox div:nth-of-type(2) {
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <ul class="box">
    <p>0</p>
    <li>1</li>
    <li>2</li>
    <li>3-1</li>
    <p>3-2</p>
    <li>4</li>
    <p>5</p>
    <li>6</li>
  </ul>
  <hr>
  <ul class="ulbox">
    <li>a</li>
    <div>11</div>
    <li>b</li>
    <li>c</li>
    <p>dddd</p>
    <li>f</li>
    <div>22</div>
    <li>g</li>
  </ul>
</body>
</html>
posted @ 2022-03-04 14:54  青柠i  阅读(11)  评论(0编辑  收藏  举报