Question

鉴于以下情况，是否有一种方法可以定位一个元素，如果它是一个h3并且它直接位于父元素内？

~/.spyder2

示例a）

 <style>
   h3:first-of-type { color: #f00; }
 </style>

例b）

<div class="mydiv">
   <h3 class="tobetargeted"></h3>
</div>

无论是第一个类型还是第一个孩子都不会起作用，因为在这两种情况下，h3元素的计算结果为true。我想要的是例子a）为真，但例子b）为假。

所以......如果元素是H3，它就是父元素内的第一个元素。

有什么想法吗？

Answer 1

:first-child一定能帮到你。

.test {
  border: 1px solid black;
  margin: 0 0 10px;
}
.test h3:first-child {
  color: red;
}

<div class="test">
  <h3>H3 - should be red</h3>
</div>
<div class="test">
  <p>p</p>
  <h3>H3 - should be black</h3>
</div>

Answer 2

使用此

h3:nth-child(1) { color: #f00; }

＆＃13;

h3:nth-child(1) { color: #f00; }

＆＃13;

<div class="mydiv">
   <h3 class="tobetargeted">Hello</h3>
</div>
<div class="mydiv">
   <p></p>
   <h3 class="nottobetargeted">Hello</h3>
</div>

＆＃13;

目标元素，如果它是div中的第一个元素

2 个答案: