: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;
}
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屋!