Question

我有一个问题，也许很明显，但我找不到任何答案如何做到这一点。

我的网站上有这样的结构：

<div class="row-even">
     <article class="featured-job">a</article>
</div>
<div class="row-odd">
     <article class="featured-job">b</article>
</div>
<div class="row-even">
     <article class="regular-job">a</article>
</div>
<div class="row-odd">
     <article class="regular-job">b</article>
</div>
<div class="row-even">
     <article class="regular-job">c</article>
</div>

这个微小的东西是由PHP生成的，用于列出两种类型的文章，特色作业和常规作业。我想通过为 .regular-job 文章的第一篇添加margin-top来分离这两种内容类型。我尝试使用第一行，第一个孩子，第一个类型，所有这些都来自 first - *甚至尝试了 nth-child ，但没有任何对我有用（我知道这些分隔符正在处理我正在使用的元素的父元素。）

有什么方法可以做到吗？

Answer 1

第一个孩子和regular-job的问题是文章不是直接在同一个父级中，因为它们嵌套在row-even＆amp; row-odd。您可以将regular-job行包装在另一个div中，以获取应用的边距，或者将另一个类添加到包含regular-job的第一行。您甚至可以直接将类添加到第一个regular-job。

我不知道你的PHP循环是什么样的，但也许会尝试使用计数器。

如果需要，我很乐意提供HTMl / CSS示例！

Answer 2

你可能想要做那样的事情：

div:first-child .regular-job {
    margin-top: 20px;
}

您选择具有.featured-job子项的第一个父元素。

PS。在应用边距时要小心，它不适用于内联元素，或者如果要分离父元素，则将其应用于文章并不是一个好主意。

Answer 3

正如Sven所说，问题在于你需要元素作为兄弟姐妹才能使用这些选择器。

在父级中设置一个类，与子级匹配：

HTML

<div class="row-even featured-father">
     <article class="featured-job">a</article>
</div>
<div class="row-odd featured-father">
     <article class="featured-job">b</article>
</div>
<div class="row-even regular-father">
     <article class="regular-job">a</article>
</div>
<div class="row-odd regular-father">
     <article class="regular-job">b</article>
</div>
<div class="row-even  regular-father">
     <article class="regular-job">c</article>
</div>

然后，很容易设置CSS。例如：

.featured-father + .regular-father article {
    background-color: red;
}

fiddle

Answer 4

在PHP中迭代时，添加另一个带索引的虚拟类。然后，制作自定义课程将是一块蛋糕：

<div class="row-even featured_1">
     <article class="featured-job">a</article>
</div>
<div class="row-odd featured_2">
     <article class="featured-job">b</article>
</div>
<div class="row-even regular_1">
     <article class="regular-job">a</article>
</div>
<div class="row-odd regular_2">
     <article class="regular-job">b</article>
</div>
<div class="row-even regular_3">
     <article class="regular-job">c</article>
</div>

注意两个引入的类：featured_X和regular_X。

然后：

.regular_1{
margin-top:50px;
}

CSS伪类

4 个答案: