如何使用CSS選擇div的第二個孩子div

我想在wordpress中設計div的樣式。由於你不能提供任何ID，我必須選擇使用CSS3 :nth-child()選擇器。我想針對第三DIV我想我的CSS規則，但它不工作的任何想法我要去的地方錯了如何使用CSS選擇div的第二個孩子div

#ninja_forms_form_175_all_fields_wrap:nth-of-type(2) { 
    padding: 0px; 
} 


<div id="ninja_forms_form_175_all_fields_wrap" > 
    <div class="ninja-row"> 
     <div class="ninja-col-1-2">

來源

2016-07-22 Francis Gallagher

所以你想式的「忍者-COL-1-2」？ – timo

爲什麼不按課程？ –

是的，這是第二個div的兄弟姐妹，但我不能編輯它給出的類，因爲它需要其他地方 –

試試這個：#ninja_forms_form_175_all_fields_wrap>div:first-of- type>div: first-of-type

來源

2016-07-22 07:53:18

非常感謝工作 –

你應該這樣做：

首套你的三個到的div一個div
然後選擇第二個

.all-ninja div:nth-child(2) { 
 
    //Write your CSS 
 
}

<div class="all-ninja"> 
 
    <div id="ninja_forms_form_175_all_fields_wrap" > 
 
    <div class="ninja-row"> 
 
    <div class="ninja-col-1-2"> 
 
</div>

來源

2016-07-22 07:47:18

建立窗體的wordpress插件無法編輯HTML –

如果我不是錯您的標記應該是這樣的：

<div id="ninja_forms_form_175_all_fields_wrap" > 
     <div class="ninja-row"> 
      <div class="ninja-col-1-2"> 
      </div> 
     </div> 
</div>

所以你需要使用直接類風格.ninaj-col-1-2，而不是使用:nth-child

下面的代碼應該可以工作

#ninja_forms_form_175_all_fields_wrap .ninja-col-1-2{ 
padding:0; 
}

來源

2016-07-22 07:49:45 Kan412

這不會影響所有div嗎？我只是選擇那個div –

已更新的答案。 – Kan412

嘗試瞄準，使用div。

#ninja_forms_form_175_all_fields_wrap{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#ccc; 
 
} 
 
#ninja_forms_form_175_all_fields_wrap > .ninja-row{ 
 
    width:100px; 
 
    height:100px; 
 
    border:1px solid #f22; 
 
} 
 
#ninja_forms_form_175_all_fields_wrap > .ninja-row > .ninja-col-1-2{ 
 
    width:50px; 
 
    height:50px; 
 
    border:1px solid #fff; 
 
} 
 

 
#ninja_forms_form_175_all_fields_wrap > .ninja-row div:nth-child(1){ 
 
    background:#111; 
 
}

<div id="ninja_forms_form_175_all_fields_wrap" > 
 
<div class="ninja-row"> 
 
<div class="ninja-col-1-2"></div> 
 
</div> 
 
</div>

來源

2016-07-22 07:57:55 frnt

如何使用CSS選擇div的第二個孩子div

回答

相關問題