:nth-child(n)前面有无空格的区别

imtanqin

已于 2022-03-01 00:04:32 修改

阅读量292

点赞数

分类专栏： HTML&CSS&JS&TS 文章标签： css css3

于 2021-05-16 00:28:37 首次发布

本文链接：https://blog.csdn.net/qq_51634332/article/details/116868311

版权

HTML&CSS&JS&TS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

:nth-child(n) 前面有无空格的区别

:nth-child(n) 前面有空格

<!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>
      ul {
        width: 40%;
        margin: 8px auto;
        padding: 8px;
        border: 1px solid #999;
        list-style: none;
      }

      p {
        margin-left: 20px;
      }
        
      /* ↓↓↓ */
      ul :nth-child(3) {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>✅✅</li>
      <li>
        ✅✅
        <p>⛔⛔⛔</p>
        <p>⛔⛔⛔</p>
        <p>⛔⛔⛔</p>
      </li>
      <li>✅✅</li>
    </ul>
    <ul>
      <li>✅✅</li>
      <li>✅✅</li>
      <li>✅✅</li>
    </ul>
    <ul>
      <li>✅✅</li>
      <li>✅✅</li>
      <li>✅✅</li>
    </ul>
  </body>
</html>

结论：有空格时，会把所有 ul 子孙后代中所有元素的第三个子元素选出来添加样式。
在这里插入图片描述

:nth-child(n)前面无空格

<!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>
      ul {
        width: 40%;
        margin: 8px auto;
        padding: 8px;
        border: 1px solid #999;
        list-style: none;
      }

      p {
        margin-left: 20px;
      }

      /* ↓↓↓ */
      ul:nth-child(3) {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>✅✅</li>
      <li>
        ✅✅
        <p>⛔⛔⛔</p>
        <p>⛔⛔⛔</p>
        <p>⛔⛔⛔</p>
      </li>
      <li>✅✅</li>
    </ul>
    <ul>
      <li>✅✅</li>
      <li>✅✅</li>
      <li>✅✅</li>
    </ul>
    <ul>
      <li>✅✅</li>
      <li>✅✅</li>
      <li>✅✅</li>
    </ul>
  </body>
</html>