如何确定元素是否位于内容块的顶部

Question

我想看看是否有一种方法可以确定内容块顶部是否有一个元素，并以该元素为目标来执行一些 CSS。我要定位的元素是H2

所以基本上我有一个内容块，里面有这样的内容：

<div class="content"> 
    <h2>text<h2>
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>
</div>

.h2 {
    padding: 20px;
}

我想要一种方法来执行类似

的内容

“如果 H2 元素存在于内容 div 的最顶部，则使用 jQuery 或 CSS 给它一个 padding 或 0”。

我知道你可能在想为什么不直接做.content h2:first-child？

我不这样做的原因是网站上其他地方的另一个内容块可能看起来像：

<div class="content"> 
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>
</div>

使用first-child 将给出第一段之后的H2 - p - padding 为 0。我只需要 div 顶部的 H2 即可拥有 padding 0。

Answer 1

你的前提是错误的

使用first-child 将给出H2 第一段padding 0

如果您使用h2:first-of-type，就会发生这种情况。那将在p 之后选择h2，是的。

但如果您使用h2:first-child，则不会发生这种情况。这只选择h2，它是第一个孩子。如果你事先有p，那么h2 不会是第一个孩子，p 也不会是h2，所以选择器不会匹配。

这样就可以解决问题了：

.content h2:first-child {
  padding: 0;
}

Answer 2

您可以使用first-of-type 设置规则，然后使用相邻兄弟选择器+ 取消设置相同的规则

.content {
  border: dashed green 1px
}
.content > h2:first-of-type {
  background: red
}
.content > p + h2:first-of-type {
  background: transparent
}

<div class="content">
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
</div>

<div class="content">
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
</div>

正如@Oriol 所说，h2:first-child 会自行工作，你可以看他的解释here

查看只有h2:first-child的sn-p

.content {
  border: dashed green 1px
}
.content > h2:first-child {
  background: red
}

<div class="content">
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
</div>

<div class="content">
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
</div>

Answer 3

你可以用一个类来隔离那个顶部块，然后像这样影响那个块：

h2 {
  padding: 20px;
}
.content.top h2:first-child {
  padding: 0;
}

<div class="content top">
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
  <h2>text</h2>
  <p>text text text</p>
</div>

Answer 4

既然你已经标记了 jQuery，这里是 jQuery 解决方案：

$('.content').each(function() {
if($(this).children()[0].nodeName=='H2') {
$(this).children().first().css('color','red'); //set padding in your case
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"> 
<h2>text</h2>
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>

</div>

<div class="content"> 
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>
</div>

Answer 5

你可以像这样定位第一个元素

body > *:first-child {
  outline: 1px solid red;
}

希望我能帮到你。