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

【问题标题】：how to select the 2nd child Div of a div using CSS如何使用 CSS 选择 div 的第二个子 div
【发布时间】：2016-11-26 00:43:59
【问题描述】：

我正在尝试在 wordpress 中设置 div 的样式。由于您无法提供任何 ID，因此我必须选择使用 CSS3 :nth-child() Selector。我正在尝试定位第三个 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">

【问题讨论】：

所以您要设置“ninja-col-1-2”的样式？
是的，这是第二个 div 的兄弟，但我无法编辑它给定的类，因为它需要其他地方
CSS select first-of-type amongst grandchildren?的可能重复

标签： wordpress css css-selectors padding

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这不会影响所有的 div 吗？我只是选择那个 div

【解决方案4】：

你应该这样做：

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

【讨论】：

它的 wordpress 插件构建了一个我无法编辑 HTML 的表单