为何nth-child()选择器无法作用于目标div的子元素？

我有一个HTML结构，主容器（class为global_container account）内包含多个div元素。尝试用nth-child选择器给这个容器下的第一个div应用样式，但样式没生效。我知道替代方案，比如用.global_container.account > div或者行内样式，但想搞清楚nth-child失效的细节。

现有代码 #

CSS代码 #

/**************
* All container
***************/
.global_container {
    display: flex;
    flex-direction: column;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 24px;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
}

.global_container_account {
    margin-bottom: 48px;
}

/* ---------------EDIT NTH-CHILD(1) ------------------- */
div.global_container.account:nth-child(1) {
    padding-top: 0px;
  padding-bottom: 12px;
}

.container_row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0px;
  border-bottom: 1px solid #e3e3e3;
  /*padding: 24px;*/
}

/************
* All columns
*************/
.label_col {
  width: 30%;
}

.data_col {
  width: 70%;
}

.data_col.name_surname {
  display: flex; 
  gap: 12px;
}

/**********
* All Rows
**********/
p.items_row {
  margin: 0px;
}

.items_row {
  width: 100%;
}

.password_fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0px!important;
  padding: 0px!important;
}

.password_fields > p {
  margin: 0px;
}

HTML代码 #

<div class="global_container account">
    <!-- Field Name Surname -->
    <div class="container_row">
      <div class="label_col">
        <label class="t2" for="account_first_name">Nome & Cognome <span class="required">*</span></label> 
        <label class="t2" style="display: none;" for="account_last_name">Cognome &nbsp;<span class="required">*</span></label>
      </div>

      <div class="data_col name_surname">
        <p class="items_row">
          <input type="text" placeholder="Inserisci il tuo nome" class="field-settings" name="account_first_name" id="account_first_name" autocomplete="given-name" value="Name Value" /> 
        </p>
        <p class="items_row">
          <input type="text" placeholder="Inserisci il tuo cognome" class="field-settings" name="account_last_name" id="account_last_name" autocomplete="family-name" value="Last Name Value" />
        </p> 
      </div>
    </div>
  
    <!-- Field Display Name -->
    <div class="container_row">
      <div class="label_col">
        <label class="t2" for="account_display_name">Nome visualizzato <span class="required">*</span></label>
      </div>
      
      <div class="data_col">
        <p class="items_row">
          <select class="field-settings" name="account_display_name" id="account_display_name">
            <option value="0">Zero</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
          </select> 
        </p>
      </div>
    </div>

    <!-- Field Username login -->
    <div class="container_row">
      <div class="label_col">
        <label class="t2" for="account_user_login">Username</label>
      </div>
      
      <div class="data_col">
        <p class="items_row">
          <input type="text" class="field-settings disabled" name="account_user_login" id="account_user_login" disabled value="Username Value" />
        </p>
      </div>
    </div>

    <!-- Field Email -->
    <div class="container_row">
      <div class="label_col">
        <label class="t2" for="disabled_account_email">Email</label>
      </div>
      
      <div class="data_col">
        <p class="items_row email_show">
          <input class="field-settings disabled" style="pointer-events:none;" name="disabled_account_email" id="disabled_account_email" disabled value="Email Value" />
        </p>
      </div>
    </div>

    <!-- Field Password -->
    <div class="container_row">
        <div class="label_col">
          <label class="t2">Modifica Password</label>
        </div>
        
        <div class="data_col">
          <fieldset class="password_fields">  
            <p>
              <div class="input-group">
                <input type="password" class="field-settings" name="password_current" id="password_current" autocomplete="off" placeholder="Password Corrente (Lascia in bianco per non modificare)"/>
                <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/>
                <label for="pw_current" class="fa"></label>
              </div>
            </p>

            <p>
              <div class="input-group">
                <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" placeholder="Nuova Password (Lascia in bianco per non modificare)"/>
                <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/>
                <label for="pw_1" class="fa"></label>
              </div>
              <div class="woocommerce-password-strength"></div>
            </p>

            <p>
              <div class="input-group">
                <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" placeholder="Conferma Password"/>
                <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/>
                <label for="pw_2" class="fa"></label>
              </div>
            </p>
          </fieldset>
        </div>
      </div>
    </div>
  </div>

失效原因分析 #

你写的选择器div.global_container.account:nth-child(1)逻辑完全错误：

• 这个选择器的含义是：匹配某个父元素的第1个子元素，且这个子元素是带有global_container和account类的div——它选中的是.global_container.account这个容器本身，而不是容器内部的第一个div。
• 你的需求是给.global_container.account内部的第一个div加样式，所以选择器的层级要调整，应该写成：

  .global_container.account > div:nth-child(1) {
      padding-top: 0px;
      padding-bottom: 12px;
  }
  

  或者用更简洁的:first-child：

  .global_container.account > div:first-child {
      padding-top: 0px;
      padding-bottom: 12px;
  }
  

简单说，nth-child是针对当前元素在其父元素中的位置，而不是它的子元素的位置。你之前把选择器的目标对象搞反了，导致样式应用到了容器本身，而不是内部的第一个div。

内容的提问来源于stack exchange，提问作者Snorlax