如何使用 CSS select div 的第二个 child Div

Question

我正在尝试在 wordpress 中设置 div 的样式。由于您无法提供任何 ID，因此我必须 select 才能使用 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
然后select第二个

.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>

所以你需要直接使用 class 来设置样式 .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

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

如何使用 CSS select div 的第二个 child Div

how to select the 2nd child Div of a div using CSS

css

wordpress

padding

css-selectors