将CSS3应用于伪类第一个子类_Css_Css Selectors_Pseudo Class

将CSS3应用于伪类第一个子类

css

将CSS3应用于伪类第一个子类,css,css-selectors,pseudo-class,Css,Css Selectors,Pseudo Class,我有这样的标记 <div class='wrap'> <div class='container'> Body Container content </div> <div class='container'> Footer Container content </div> </div> 以上工作。问题是，徽标不仅位于正文内容之上，而且位于页脚内容之上，这并不是理想的结果。我玩过各种组合的游戏 .container::b

我有这样的标记

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

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

以上工作。问题是，徽标不仅位于正文内容之上，而且位于页脚内容之上，这并不是理想的结果。我玩过各种组合的游戏

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

}

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

}

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

如果最坏的情况发生了，我可以用jQuery来做，但是我想避免它。

< P>你会考虑使用每个容器中的容器类和每个HTML5元素吗？这样，您就可以在没有psuedo元素的情况下引用/定位这些元素

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

这样，您要查找的标题/徽标将仅显示在第一个容器的上方。然后，如果需要对应用伪元素，可以执行以下操作：

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

你会考虑使用每个容器中的容器类和每个HTML5元素吗？这样，您就可以在没有psuedo元素的情况下引用/定位这些元素

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

这样，您要查找的标题/徽标将仅显示在第一个容器的上方。然后，如果需要对应用伪元素，可以执行以下操作：

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

我不认为有一种方法可以使它与第n个child一起工作，但是如果您总是只在类的第一个元素中需要它，它肯定会与第一个child一起工作。container:

我在这里的第一个想法是，头部应该有一个额外的类，或者使用and元素代替DIV。例如：

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

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

我的第一个想法是，应该为标题添加一个类，或者使用and元素代替div。例如：

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

但是，如果由于某种原因您无法更改html，则：first child选择器应能满足您的需要，正如其他人所回答的那样。

如果要使用第n个子元素，则需要将其添加到要选择的元素的父元素中。在这种情况下，包装

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

首先，您的css中有一个输入错误：background imageurlpath/to/image.jpg缺少结束符

但是，要想做您想做的事情，有一个简单的css选择器：。在您的示例中，您尝试使用第n个tochild，但正确的语法是第n个child。查看下面的两个选项，以及一个有效的演示

.容器：第一个孩子：之前 { 显示：块；内容：前元素； /*您选择的其他样式*/ } /*以下选择器也将工作 .容器：N-child1:之前 { 显示：块；内容：前元素； } */ 身体容器内容物页脚容器内容

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

首先，您的css中有一个输入错误：background imageurlpath/to/image.jpg缺少结束符

向第一个body容器元素添加一个新类如何？向第一个body容器元素添加一个新类如何？我正在对继承的Wordpress主题进行黑客攻击。我不太愿意开始添加新的页面元素，但我尝试了您的建议——将第一个容器包装到元素中，它似乎起了作用。我把这个问题留了一段时间，以防万一有人提出另一个选择。无论如何，谢谢。最后我可能会接受你的答案。你完全可以在HTML元素中添加一些class/id，并将theme作为div元素。这样，您也可以相应地设置这些主要部分的样式。如果有帮助，请告诉我。谢谢我正在修改一个继承的Wordpress主题。我不太愿意开始添加新的页面元素，但我尝试了您的建议——将第一个容器包装到元素中，它似乎起了作用。我把这个问题留了一段时间，就我个人而言

万一有人想出另一个选择。无论如何，谢谢。最后我可能会接受你的答案。你完全可以在HTML元素中添加一些class/id，并将theme作为div元素。这样，您也可以相应地设置这些主要部分的样式。如果有帮助，请告诉我。谢谢由于您正在对继承的wordpress主题进行黑客攻击，因此在header元素中添加一个在别处未使用的类“我的标题”或其他内容应该不会产生任何副作用，然后您可以将自定义css附加到该类，而不是附加到主题中内置的类。由于您正在对继承的wordpress主题进行黑客攻击，在header元素中添加一个在别处未使用的类“我的头”或其他内容应该不会有任何副作用，然后您可以将自定义css附加到该类，而不是主题中内置的类。第n-child1将与示例中的第一个孩子一样工作，我相信会的。但是Op使用的是第n个child而不是第n个child。第n个child 1的工作原理与您示例中的第一个孩子相同，我相信会的。但是Op使用的是第n个child而不是第n个child。我接受你的答案，因为它提供了一种无需注入任何附加标记即可完成我想要的任务的方法。我接受你的答案，因为它提供了一种无需注入任何附加标记即可完成我想要的任务的方法。

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