如何使用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

回答

相关问题