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

Question 1

我正在尝试为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">

Question 2


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

Question 3


           
            
             你应该像这样做。
            
            
             
              首先将你的三个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>
扩展片段
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="subComments___2FmoI"&gt;&lt;div class="main___24sYp"&gt;&lt;div class="name___85mbA"&gt;&lt;a class="reviewerLink___2jSlZ" href="https://stackoverflow.com/users/5945334/francis-gallagher" title="Francis Gallagher" target="_blank" rel="noopener nofollow"&gt;Francis Gallagher&lt;/a&gt;：&lt;/div&gt;&lt;div class="content___38THn"&gt;&lt;div class="sub_comments_one"&gt;&lt;span class="comment-copy"&gt;它是wordpress的插件，可以建立一个表格，我不能编辑HTML。&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="main___2afui"&gt;&lt;div class="info___2dyKv"&gt;&lt;div class="commentInfo___1616D"&gt;&lt;a class="reviewerLink___1Y5EL" href="https://stackoverflow.com/users/6563757/kan412" title="Kan412" target="_blank" rel="noopener nofollow"&gt;&lt;img class="avatar___3gRVO" src="https://www.gravatar.com/avatar/90f6b7b6ca445f1a75694c63d4ad7c86?s=64&amp;amp;d=identicon&amp;amp;r=PG&amp;amp;f=1" title="Kan412" alt="Kan412" referrerpolicy="no-referrer"/&gt;&lt;div class="name___1XGg4"&gt;Kan412&lt;/div&gt;&lt;/a&gt;&lt;div class="time___2OtLQ"&gt;发布于 &lt;!-- --&gt;2016-07-22&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="vote___3mJ3W"&gt;0&lt;!-- --&gt; 人赞同&lt;/div&gt;&lt;div class="main___1IDZm htmlViewer___2iaXC"&gt;&lt;div class="comments_one_context"&gt;&lt;div class="s-prose js-post-body" itemprop="text"&gt;
&lt;p&gt;&lt;strong&gt;如果我没有错，你的标记应该是这样的。&lt;/strong&gt;&lt;/p&gt;
&lt;pre class="default s-code-block"&gt;&lt;code class="" id=""&gt;&lt;code class="hljs language-xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;id&lt;/span&gt;=&lt;span class="hljs-string"&gt;"ninja_forms_form_175_all_fields_wrap"&lt;/span&gt; &amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"ninja-row"&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"ninja-col-1-2"&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;p&gt;所以你需要使用直接类来样式化&lt;code id=""&gt;&lt;code&gt;.ninaj-col-1-2&lt;/code&gt;&lt;/code&gt;，而不是使用&lt;code id=""&gt;&lt;code&gt;:nth-child&lt;/code&gt;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;下面的代码应该可以工作&lt;/strong&gt;&lt;/p&gt;
&lt;pre class="default s-code-block"&gt;&lt;code class="" id=""&gt;&lt;code class="hljs language-css"&gt;&lt;span class="hljs-selector-id"&gt;#ninja_forms_form_175_all_fields_wrap&lt;/span&gt; &lt;span class="hljs-selector-class"&gt;.ninja-col-1-2&lt;/span&gt;{
&lt;span class="hljs-attribute"&gt;padding&lt;/span&gt;:&lt;span class="hljs-number"&gt;0&lt;/span&gt;;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="subComments___2FmoI"&gt;&lt;div class="main___24sYp"&gt;&lt;div class="name___85mbA"&gt;&lt;a class="reviewerLink___2jSlZ" href="https://stackoverflow.com/users/5945334/francis-gallagher" title="Francis Gallagher" target="_blank" rel="noopener nofollow"&gt;Francis Gallagher&lt;/a&gt;：&lt;/div&gt;&lt;div class="content___38THn"&gt;&lt;div class="sub_comments_one"&gt;&lt;span class="comment-copy"&gt;这是否会影响到所有的div？我只是要选择那个div&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="main___2afui"&gt;&lt;div class="info___2dyKv"&gt;&lt;div class="commentInfo___1616D"&gt;&lt;a class="reviewerLink___1Y5EL" href="https://stackoverflow.com/users/5805150/frnt" title="frnt" target="_blank" rel="noopener nofollow"&gt;&lt;img class="avatar___3gRVO" src="https://www.gravatar.com/avatar/dcddbab09212575f0d21b2415d49188f?s=64&amp;amp;d=identicon&amp;amp;r=PG&amp;amp;f=1" title="frnt" alt="frnt" referrerpolicy="no-referrer"/&gt;&lt;div class="name___1XGg4"&gt;frnt&lt;/div&gt;&lt;/a&gt;&lt;div class="time___2OtLQ"&gt;发布于 &lt;!-- --&gt;2016-07-22&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="vote___3mJ3W"&gt;0&lt;!-- --&gt; 人赞同&lt;/div&gt;&lt;div class="main___1IDZm htmlViewer___2iaXC"&gt;&lt;div class="comments_one_context"&gt;&lt;div class="s-prose js-post-body" itemprop="text"&gt;
&lt;p&gt;试试用&lt;code id=""&gt;&lt;code&gt;div&lt;/code&gt;&lt;/code&gt;来定位。&lt;/p&gt;
&lt;pre class="snippet-code-css lang-css s-code-block"&gt;&lt;code class="" id=""&gt;&lt;code class="hljs language-css"&gt;&lt;span class="hljs-selector-id"&gt;#ninja_forms_form_175_all_fields_wrap&lt;/span&gt;{
  &lt;span class="hljs-attribute"&gt;width&lt;/span&gt;:&lt;span class="hljs-number"&gt;400px&lt;/span&gt;;
  &lt;span class="hljs-attribute"&gt;height&lt;/span&gt;:&lt;span class="hljs-number"&gt;400px&lt;/span&gt;;
  &lt;span class="hljs-attribute"&gt;background&lt;/span&gt;:&lt;span class="hljs-number"&gt;#ccc&lt;/span&gt;;
&lt;span class="hljs-selector-id"&gt;#ninja_forms_form_175_all_fields_wrap&lt;/span&gt; &amp;gt; &lt;span class="hljs-selector-class"&gt;.ninja-row&lt;/span&gt;{
  &lt;span class="hljs-attribute"&gt;width&lt;/span&gt;:&lt;span class="hljs-number"&gt;100px&lt;/span&gt;;
  &lt;span class="hljs-attribute"&gt;height&lt;/span&gt;:&lt;span class="hljs-number"&gt;100px&lt;/span&gt;;
  &lt;span class="hljs-attribute"&gt;border&lt;/span&gt;:&lt;span class="hljs-number"&gt;1px&lt;/span&gt; solid &lt;span class="hljs-number"&gt;#f22&lt;/span&gt;;
&lt;span class="hljs-selector-id"&gt;#ninja_forms_form_175_all_fields_wrap&lt;/span&gt; &amp;gt; &lt;span class="hljs-selector-class"&gt;.ninja-row&lt;/span&gt; &amp;gt; &lt;span class="hljs-selector-class"&gt;.ninja-col-1-2&lt;/span&gt;{
  &lt;span class="hljs-attribute"&gt;width&lt;/span&gt;:&lt;span class="hljs-number"&gt;50px&lt;/span&gt;;
  &lt;span class="hljs-attribute"&gt;height&lt;/span&gt;:&lt;span class="hljs-number"&gt;50px&lt;/span&gt;;
  &lt;span class="hljs-attribute"&gt;border&lt;/span&gt;:&lt;span class="hljs-number"&gt;1px&lt;/span&gt; solid &lt;span class="hljs-number"&gt;#fff&lt;/span&gt;;
&lt;span class="hljs-selector-id"&gt;#ninja_forms_form_175_all_fields_wrap&lt;/span&gt; &amp;gt; &lt;span class="hljs-selector-class"&gt;.ninja-row&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;div&lt;/span&gt;&lt;span class="hljs-selector-pseudo"&gt;:nth-child&lt;/span&gt;(&lt;span class="hljs-number"&gt;1&lt;/span&gt;){
  &lt;span class="hljs-attribute"&gt;background&lt;/span&gt;:&lt;span class="hljs-number"&gt;#111&lt;/span&gt;;
&lt;pre class="snippet-code-html lang-html s-code-block"&gt;&lt;code class="" id=""&gt;&lt;code class="hljs language-xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;id&lt;/span&gt;=&lt;span class="hljs-string"&gt;"ninja_forms_form_175_all_fields_wrap"&lt;/span&gt; &amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"ninja-row"&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"ninja-col-1-2"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;