penguin_cheng 2021-10-16 16:40 采纳率: 76.2%
浏览 36
已结题

求解决：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
  • 写回答

2条回答 默认 最新

  • 本堃不方 2021-10-16 18:51
    关注

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

    <!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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月25日
  • 已采纳回答 10月17日
  • 创建了问题 10月16日

悬赏问题

  • ¥15 基于双目测规则物体尺寸
  • ¥15 wegame打不开英雄联盟
  • ¥15 公司的电脑，win10系统自带远程协助，访问家里个人电脑，提示出现内部错误，各种常规的设置都已经尝试，感觉公司对此功能进行了限制（我们是集团公司）
  • ¥15 救！ENVI5.6深度学习初始化模型报错怎么办？
  • ¥30 eclipse开启服务后，网页无法打开
  • ¥30 雷达辐射源信号参考模型
  • ¥15 html+css+js如何实现这样子的效果？
  • ¥15 STM32单片机自主设计
  • ¥15 如何在node.js中或者java中给wav格式的音频编码成sil格式呢
  • ¥15 不小心不正规的开发公司导致不给我们y码，