Html CSS伪类

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

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

<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文章添加页边空白来区分这两种内容类型。我试着使用第一行，第一个孩子，第一种类型，都是从第一个-*开始的，甚至试过第n个孩子，但对我来说没有任何效果。 我知道这些分隔符在我正在使用的元素的父元素上工作

---

有什么方法可以做到吗？

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

---

第一个子项和常规作业的问题是，项目不直接位于同一父项中，因为它们嵌套在偶数行和奇数行中。您可以将常规作业行包装到另一个应用了边距的div中，或者向包含常规作业的第一行添加另一个类。您甚至可以将类直接添加到第一个常规作业中

我不知道PHP循环是什么样子的，但也许可以尝试使用计数器

---

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

您可能想做这样的事情：

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

您选择第一个父元素，该元素具有.job的子元素

---

注意你在应用边距的地方，它对内联元素不起作用，或者如果你想分离父元素，那么将它应用到文章中不是一个好主意

正如斯文所说，问题在于，您需要元素成为同级元素，这样选择器才能工作

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

HTML

---

很抱歉，但是，我真的建议不要这样编程。难以维护且不带感情色彩。这是一种快速修复的编程方式。当然，每个人对事物都有自己的看法。但我的观点是，这是最简单、最直接的方法。这将适用于9.9999%的所有浏览器。别担心，保养起来太难了。否则，拥有一个复杂的CSS规则可能会导致不眠之夜调试为什么在IE7上什么都没有发生，例如修改后的解决方案：检查PHP中featured和regular的更改，并仅在必要时添加额外的类。类与语义无关。只要使用了适当的HTML元素，这就不会有问题。我可以想象一个场景，其中该元素的margin-top声明来自一个很容易理解的实用程序类，比如margin-top-single。这将是一个完全可以接受的解决方法。@GRSEV我尊重每个人对铲球的不同看法，我将取消我的反对票&我不是有意冒犯。尽管Sven用更干净的类名提到了这一点，但我同意=]有一个表格可以让你选择这篇文章是常规工作还是特色工作，因此如果这篇文章已经写好了，那么最新的文章将占据最顶端。因此，如果您以常规作业内容类型发送表单，在本例中，它将在代码的第三位弹出。这将是第一个正规的职业培训班。因此，我不能简单地为第一个常规作业添加直接类。如果第一个div不包含.regular job怎么办？@Mathias然后使用div:first child>div{margin top:20px；}。更好的方法是：为第一个出现的div分配一个20px的顶部填充-这也可以缓解问题。@Terry但他希望第一个div包含一个.regular作业，而不是第一个div包含任何div，如果第一个div包含一个.regular.job`，则不是第一个div。纯CSS哪一个是不可能的？@Mathias你是对的，请投我一票。首先是谁投票给我的？谢谢你的回答，当然也谢谢斯文！很遗憾CSS不支持这些东西。

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

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

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