求解决：container容器中使用选择器，如图所示，为何是第三个div，而不是第二个

图一为运行结果：

img

图二是代码截图：

img

若把选择器里的“3”==>"2",则无效（如图三）：求解决

img

<!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">
  <title>认识栅格系统-2</title>
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <style>
    [class^="col"] {
      border: 5px solid purple;
    }
    .container .row:nth-child(1) {
      background-color: peru;
    }
    .container .row:nth-child(3) {
      background-color: plum;
    }
  </style>
</head>

<body>  
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6">1</div>
      <div class="col-lg-3 col-md-4 col-sm-6">2</div>
      <div class="col-lg-3 col-md-4 col-sm-6">3</div>
      <div class="col-lg-3 col-md-4 col-sm-6">4</div>
    </div>
  
    <br>
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6">1</div>
      <div class="col-lg-3 col-md-4">2</div>
      <div class="col-lg-3 col-md-4">3</div>
      <div class="col-lg-3 col-md-4">4</div>
    </div>
  </div>
</body>

</html>
```css

这玩意有点绕，图给你，代码给你，慢慢琢磨，不懂了再说，界面有点拉，是哪个意思就行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ddd</title>
        <style>
        /* 指定每个 p 元素匹配的父元素中第 2 个子元素的背景色： */
            p:nth-child(2) {
                background: #ff0000;
            }
        </style>
    </head>
    <body  style="border:  10px solid blue; padding: 20px;">

        <div style='border: 1px solid black;'>
            <h1>相对于 div 我是第1个元素</h1>
            <p>相对于 div 我是第2个p元素</p>
            <p>相对于 div 我是第3个p元素</p>
            <p>相对于 div 我是第4个p元素</p>
            <p>相对于 div 我是第5个p元素</p>
        </div>

        <p> 相对于 body 我是第2个p元素</p>
        <p> 相对于 body 我是第3个p元素</p>
        
        <div style='border: solid 2px green;'>
            <h1>相对于 这个div 我是第1个元素</h1>
            <p>相对于 这个div 我是第2个p元素</p>
            <p>相对于 这个div 我是第3个p元素</p>
            <p>相对于 这个div 我是第4个p元素</p>
            <p>相对于 这个div 我是第5个p元素</p>
        </div>
        
        <div style='border: solid 2px yellow;margin-top: 5px;'>
            <p>相对于 这个div 我是第1个元素</p>
            <h1>第二个不是P不生效</h1>
            <p>相对于 这个div 我是第3个p元素</p>
            <p>相对于 这个div 我是第4个p元素</p>
            <p>相对于 这个div 我是第5个p元素</p>
        </div>
        
        
    </body>
</html>

img

按照你的想法应该是这种选择器 :nth-of-type(2)