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

我想要一种预先形成类似

之类的东西的方法

＆＃34;如果内容H2的最顶部存在div元素，则为padding提供0＆＃34;使用jQuery或CSS。

我知道你可能在想为什么不做.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.我只需要在最顶层的H2 div的padding为0。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

正如@Oriol所提到的那样，h2:first-child会自行运作，你可以看到他的解释here

查看仅包含h2:first-child

的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的前提是假的

使用first-child会给出H2之后的padding 第一段a h2:first-of-type为0

如果您使用h2，就会发生这种情况。这样会在p之后选择h2:first-child，是。

但如果您使用h2，则不会发生这种情况。这只会选择第一个孩子的p。如果您预先h2，那么p将不是第一个孩子，h2将不会是.content h2:first-child { padding: 0; }，因此选择器将不匹配

所以这将解决问题：

Sub IncreaseMonth()
    Dim dDate As Date
    Dim NumberofTasks As Integer
        NumberofTasks = ThisWorkbook.Worksheets("Dashboard").Range("Number_of_Tasks")
    Dim x As Integer

    For x = 1 To NumberofTasks
        dDate = Range("C30").Value
        Range("C30").Value = _
            DateSerial(Year(dDate), _
            Month(dDate) + 1, Day(dDate))
    Next x
End Sub

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

希望我能帮助你。

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

5 个答案: