伪类：第一个孩子不工作答案

【问题标题】：pseudoclass :first-child not working伪类：第一个孩子不工作
【发布时间】：2011-11-21 02:59:40
【问题描述】：

我做错了吗？

css/sass：

#section
  article
   border-top: 1px solid black
   &:first-child
     border: none !important

html/haml:

#section
  %h2 title
   %article
    stuff here. There is still a top border here despite first-child style.
   %article
    stuff here.
   %article
    stuff here.

这样不行，第一个<article>还有边框。我必须再上一堂课，并在第一篇文章中做类似article.noborder 的事情，这样才能没有边界。任何帮助将不胜感激......css讨厌我。

【问题讨论】：

你做错的事情是误解:first-child。 article:first-child 并不意味着“匹配第一个 article 元素”，它的意思是“匹配第一个子元素 if 这是一个 article 元素” - 在这种情况下，第一个子元素是一个 @987654329 @.

标签： html css sass pseudo-class

【解决方案1】：

您必须使用:first-of-type，因为h2 在第一个article 之前。

【讨论】：

谢谢！是的，我有一种感觉是因为 h2，但不确定要查找什么。
这行得通。 ~ 将选择除第一个元素之外的所有元素。在我的情况下 .row .row { margin-top: 0px; } .row ~ .row { margin-top: 10px; }

【解决方案2】：

section article:first-child{
  border:none;
}

section article:nth-child(2){
  border:2px solid yellow;
}

我以前遇到过这个问题，请记住不要使用不同的方式调用相同的元素。

如果您使用body section article { border:2px solid yellow} 将与section article:first-child{...} 重叠，因为前者更具体。

【讨论】：

【解决方案3】：

在我看来，H2 是该部分的第一个孩子，而不是第一篇文章。

【讨论】：