Question

我试图在wordpress中设置一个div。由于您无法提供任何ID，我必须选择使用CSS3 :nth-child()选择器。我试图瞄准第三个div 我的css规则我正在尝试，但它没有任何想法，我出错了

#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">

Answer 1

你应该这样做：

首先将三个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>

Answer 2

如果我没错，你的标记应该是这样的：

<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;
}

Answer 3

试试这个：#ninja_forms_form_175_all_fields_wrap>div:first-of- type>div: first-of-type

Answer 4

尝试使用#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>

find('list')

如何使用CSS选择div的第二个子Div

4 个答案: