псевдокласс: первый ребенок не работает

Question

Я что-то не так делаю?

CSS / дерзость:

#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 ненавидит меня.

Answer 1

Вы должны использовать :first-of-type, поскольку h2 предшествует первому article.

Answer 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{...} потому что первый более конкретен.

Answer 3

Мне кажется, что H2 - первый дочерний элемент раздела, а не первая статья.