将 CSS3 应用于 pseudo-class first-child

Question

我有这样的标记

<div class='wrap'>
<div class='container'>
Body Container content
</div>

<div class='container'>
Footer Container content
</div>
</div>

我想显示一个 header，其中包含第一个 body 容器上方的徽标。这是我通过定义

完成的

.container::before
{
 background-image(url(path/to/image.jpg);
 background-size:cover;
 content:'';
}

以上作品。问题是徽标最终不仅位于 body 内容之上，而且还位于页脚内容之上，这并不是我们想要的结果。我玩过

的各种组合

.container::before:nth-of-child(1)
{

}

.container:nth-of-child(1)::before
{

}

但我还没有完全找到正确的语法来针对第一个 .container 实例的 ::before 伪元素。我希望这里有人能够告诉我应该怎么做。

如果最坏的情况发生在最坏的情况下，我可以用 jQuery 的地方来做，但我想避免这种情况。

Answer 1

您是否会考虑对每个 HTML5 个元素使用 <main> W3 4.4.14 The main element and <footer> 4.4.9 The footer element，每个元素使用 class 个 .container？这样你就可以 reference/target 那些没有伪元素的元素

main::before
{
 background-image(url(path/to/image.jpg);
 background-size:cover;
 content:'';
}

这样您要查找的 header/logo 只会出现在第一个容器的上方。然后，如果您需要将伪元素应用于 <footer>，您可以执行以下操作：

footer::before
{
 background-image(url(path/to/image.jpg);
 background-size:cover;
 content:'';
}

Answer 2

我认为没有办法让它与 nth-of-child 一起工作，但它肯定会与 first-child 一起工作（如果你总是只在 [=16 的第一个元素中需要它） =] .container):

.container:first-child:before
{
 background-image(url(path/to/image.jpg);
 background-size:cover;
 content:'';
}

Answer 3

我首先想到的是 header 应该有一个额外的 class，或者使用 <header> 和 <footer> 元素代替 div。例如：

<div class="wrap">
    <div class="container header">
       Header
    </div>
    <div class="container footer">
        Footer
    </div>
</div>

和

.header::before {
    // stuff to make your logo
}

但是，如果由于某种原因您无法更改 html，那么 :first-child 选择器应该可以满足您的需求，正如其他人所回答的那样。

Answer 4

如果您想使用 nth-child()，您需要将它添加到您想要 select 的元素的父级。在这种情况下 .wrap.

.wrap:nth-child(1):before
{
 background-image(url(path/to/image.jpg);
 background-size:cover;
 content:'';
}

Answer 5

好的，我会添加另一个答案，因为似乎没有人解决了您的所有问题。

首先，您的 css 中有一个拼写错误：background-image(url(path/to/image.jpg) 缺少右括号。

但是，有一个简单的 css 选择器 :)。在您的示例中，您尝试 nth-to-child()，但您想要的正确语法是 nth-child()。在下面查看两个选项，以及一个有效的演示。

.container:first-child:before
{
  display: block;
  content: "Before Element";
  /* other styling that you choose*/
}

/* the following selector will also work 
.container:nth-child(1):before
{
  display: block;
  content: "Before Element";
}
*/

<div class='wrap'>
  <div class='container'>
    Body Container content
  </div>

  <div class='container'>
    Footer Container content
  </div>
</div>

请注意 display: block; 部分是为了让之前的内容出现在它自己的行中，因为 :before 元素默认为 display: inline-block;.

将 CSS3 应用于 pseudo-class first-child

Applying CSS3 to pseudo-class first-child

css

css-selectors

pseudo-class