：first-child不能选择第一个h4元素 [英] :first-child is not working to select the first h4 element

问题描述

我想知道为什么我不能缩进 h4 的：first-child 。

h4 元素的其余部分不应缩进。

HTML：

 < section& 
< article id =5> 
< h2>前7名男性最好的信息素科隆（吸引女性）< / h2> 
< h3> 2014-01-16< / h3> 
 
<！ -  img src =https://puaction.com/img/thumb/pua-berlin.jpgwidth = 80 height = 80 title =alt = -  - > 
 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
< h4>什么是信息素和信息素科隆？自然地，信息素是无味的物质，通过能量体外排出...< / h4> 
 
< / article> 
< / section> 
  

CSS：

  * {
 margin：0; 
 padding：0; 
} 
 section article [id] * {
 clear：both; 
 float：left; 
 height：auto; 
 width：100％; 
} 
 
 section article [id] h2 {
 color：#bbb; 
} 
 
 section article [id] h3 {
 color：#aaa; 
} 
 
 section article [id] h4 {
 text-align：justify; 
} 
 
 
 / *这不工作！ * / 
 section article [id] h4：first-child {/ *：first-of-type * / 
 text-indent：10px; 
} 
  

<

h4> 不是其父级的第一个子级。

元素：first-child 代表第一个子，匹配元素。在这个特定实例中，< article> 的第一个元素是< h2> 不是< h4> 。

您可以使用 ：first-of-type pseudo类在其父级子树中选择第一个< h4> 元素，如下所示：

 节文章[id] h4：first-of-type {
 text-indent：10px; 
} 
  

工作演示 。

从 MDN ：

：first-of-type CSS伪类代表
的第一个兄弟类型其父元素的子元素列表。

I was wondering why I can't indent the :first-child of h4.

All the rest of the h4 elements should not be indented.

The HTML:

<section>
    <article id="5">
        <h2>Top 7 Best Pheromone Colognes for Men (To Attract Women)</h2>
        <h3>2014-01-16</h3>

        <!--img src="https://puaction.com/img/thumb/pua-berlin.jpg" width=80 height=80 title="" alt="" -->

        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>
        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>
        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>
        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>
        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>
        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>
        <h4>What Are Pheromones And Pheromone Colognes? Naturally, pheromones are odorless substances being excreted externally by the fertile body...</h4>

    </article>
</section>

The CSS:

* {
    margin:0;
    padding:0;
}
section article[id] * {
    clear: both;
    float: left;
    height: auto;
    width: 100%;
}

section article[id] h2 {
    color: #bbb;
}

section article[id] h3 {
    color: #aaa;
}

section article[id] h4 {
    text-align: justify;
}


/* THIS IS NOT WORKING !!! */
section article[id] h4:first-child { /* :first-of-type */
    text-indent: 10px;
}

The jsFiddle demo.

解决方案

That's because the <h4> is not the first child of its parent.

element:first-child represents the first child of its parent, matching the element. And in this particular instance, the first element of <article> is a <h2> element; Not the <h4>.

You could use :first-of-type pseudo class to select the first <h4> element in its parent's children tree, as follows:

section article[id] h4:first-of-type {
    text-indent: 10px;
}

WORKING DEMO.

From the MDN:

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

这篇关于：first-child不能选择第一个h4元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！