将 CSS3 应用于伪类 first-child答案

【问题标题】：Applying CSS3 to pseudo-class first-child将 CSS3 应用于伪类 first-child
【发布时间】：2015-07-18 06:08:22
【问题描述】：

我有类似这样的标记

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

}

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

如果最坏的情况发生在最坏的情况下，我可以用一点 jQuery 来解决，但我想避免这种情况。

【问题讨论】：

给第一个body容器元素添加一个新类怎么样？

标签： css css-selectors pseudo-class

【解决方案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:'';
}

【讨论】：

我正在破解继承的 Wordpress 主题。我犹豫是否要开始添加新的页面元素，但我尝试了您的建议 - 将第一个容器包装在 <div id='main'></div> 元素中，它似乎正在工作。我将这个问题留待一段时间，以防有人提出替代方案。无论如何，谢谢。最后我可能会接受你的回答。
您绝对可以在您的 HTML 元素中添加一些类/id，并将主题保留为 div 元素。这样，您也可以相应地设置这些主要部分的样式。让我知道这是否有帮助。谢谢！

【解决方案2】：

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

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

【讨论】：

我接受你的回答，因为它提供了一种方法来做我想做的事，而无需注入任何额外的标记。

【解决方案3】：

我不认为有办法让它与nth-of-child 一起使用，但它肯定会与first-child 一起使用（如果你总是只需要在.container 类的第一个元素中使用它）：

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

【讨论】：

nth-child(1) 将与您的示例中的 first-child 相同
我相信会的。但是 Op 使用的是 nth-of-child 而不是 nth-child。

【解决方案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 选择器应该可以满足您的需求，正如其他人已经回答的那样。

【讨论】：

因为你正在破解一个继承的 wordpress 主题，添加一个不在其他地方使用的类（“my-header”或其他东西）到标题元素应该没有副作用，然后你可以附加你的自定义 css 到该类，而不是内置到主题中的类。

【解决方案5】：

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

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

【讨论】：