Question

我有类似这样的标记

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

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

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

完成的

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

以上作品。问题在于，徽标最终不仅仅高于身体内容，而且还高于页脚内容，这不是理想的结果。我玩过

的各种组合

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

}

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

}

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

如果最糟糕的情况发生在最糟糕的情况下，我可以通过jQuery来实现，但我想避免这种情况。

Answer 1

您是否会考虑每个HTML5元素<main> W3 4.4.14 The main element和<footer> 4.4.9 The footer element使用.container类？这样，您可以在没有伪元素的情况下引用/定位这些元素

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

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

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

Answer 2

我不认为有一种方法可以使它与nth-of-child一起使用，但它肯定适用于first-child（如果你只需要在第一个元素.container中使用它}）：

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

Answer 3

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

首先，你的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;。

Answer 4

我首先想到的是标题应该有一个额外的类，或者使用<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 5

如果要使用TTest，则需要将其添加到要选择的元素的父级。在这种情况下nth-child()。

.wrap

将CSS3应用于伪类第一胎

5 个答案: