html - :first-child is not working to select the first h4 element

Question

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

所有其余的 h4 元素都不应缩进。

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>

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

jsFiddle demo .

Answer 1

那是因为 <h4>不是其 parent 的第一个 child 。

element:first-child 表示其父项的第一个子项，匹配 element .在这个特定的例子中，<article> 的第一个元素是 <h2>元素;不是 <h4> .

你可以使用 :first-of-type 选择第一个伪类 <h4>其父子树中的元素，如下所示:

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

WORKING DEMO .

来自 MDN :

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