关系选择器，nth-child和nth-of-type

最新推荐文章于 2024-03-05 10:34:17 发布

小白白中之白

最新推荐文章于 2024-03-05 10:34:17 发布

阅读量116

点赞数

分类专栏：网页笔记

本文链接：https://blog.csdn.net/m0_53438035/article/details/119107821

版权

网页笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

关系选择器

后代选择器：E F 选择E元素的所有后代F元素
子选择器：E > F 选择E元素的所有子元素F
相邻同胞选择器：E + F 选择紧接在E元素之后的第一个兄弟元素F
同胞选择器：E ~ F 选择E元素之后的所有兄弟元素F

nth-child和nth-of-type

区别：

nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素。（标签优先）

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 （顺序优先）

解释及注意：

标签优先

如果是class那么碰到不同类型标签的，单独分类，符合条件的选中。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .a:nth-of-type(3){
        color: red;
    }
    </style>
</head>
<body>
    <p class="a">1</p>
    <h1 class="a">2</h1>
    <h1 class="a">3</h1>
    <h1 class="a">4</h1>
    <p class="a">5</p>
    <p class="a">6</p>
</body>
</html>

效果：
在这里插入图片描述

顺序优先

代码1：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
  .box{
    width: 400px;
    height: 400px;
    background-color: aqua;
  }
  :nth-child(1){
    width: 50px;
    height: 50px;
    background-color: black;
  }
  </style>
</head>
<body>
  <div class="box">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  </div>
</body>
</html>

效果:
在这里插入图片描述
图中一片黑，是因为：nth-child()前面没有加限定，name选择html中第一个元素即html

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
  .box{
    width: 400px;
    height: 400px;
    background-color: aqua;
  }
  div:nth-child(1){
    width: 50px;
    height: 50px;
    background-color: black;
  }
  </style>
</head>
<body>
  <div class="box">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  </div>
</body>
</html>