js的同名选择器为什么不是从1开始

Question

          <div class="tab-nav">
            <a href="javascript:;" class="active" data-id="0">账户登录</a>
            <a href="javascript:;" data-id="1">二维码登录</a>
          </div>
          <div class="tab-pane">
              <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input required type="text" placeholder="请输入用户名称/手机号码" name="username">
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <input required type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="agree">
              <label for="my-checkbox">
                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
            </div>
            <div class="button clearfix">
              <button type="submit" class="dl">登 录</button>
              <!-- <a class="dl" href="./center.html">登 录</a> -->
              <a class="fl" href="./forget.html">忘记密码？</a>
              <a class="fr" href="./register.html">免费注册</a>
            </div>
          </div>
          <div class="tab-pane" style="display: none;">
            <img class="code" src="./images/code.png" alt="">
          </div>

选择第一个tab-pane和第二个tab-pane为什么分别要用 const pane_1 = document.querySelector('.box .tab-pane:nth-child(2)');和 const pane_2 = document.querySelector('.box .tab-pane:nth-child(3)'); 而不是const pane_1 = document.querySelector('.box .tab-pane:nth-child(1)')和onst pane_2 = document.querySelector('.box .tab-pane:nth-child(2)');

Answer 1

引自免费微信小程序：皆我百晓生

在你的HTML代码中，你使用了:nth-child()选择器来选取特定的元素。:nth-child()选择器用于选择其父元素的第n个子元素。这里，你的.tab-pane元素不是其父元素的第一个或第二个子元素，而是属于一个包含多个子元素的容器（如.box）的子元素。因此，你需要根据它们在容器中的位置来选择它们。

当你使用.box .tab-pane:nth-child(n)这样的选择器时，你是在选择.box元素下的.tab-pane元素，并且这个元素是其父元素的第n个子元素。这里的"n"指的是在父元素中的位置，而不是在所有同级元素中的位置。因此，你需要根据它们在.box容器中的位置来选择它们。

对于你给出的HTML代码片段，第一个.tab-pane并不是.box的第一个子元素（因为还有其他的div元素），而是第二个子元素（在.box的子元素中）。所以你应该使用:nth-child(2)来选择它。而第二个.tab-pane是.box的第三个子元素，所以你应该使用:nth-child(3)来选择它。这就是为什么你在选择这两个元素时需要使用:nth-child(2)和:nth-child(3)的原因。使用:nth-child(1)和:nth-child(2)可能会导致你选择了错误的元素，因为这些数字代表的是在父元素中的位置，而不是在所有同级元素中的位置。