css - sass：最初の子が機能していません

Question

私はSASSを長い間使用しておらず、:first-childまたはなどの疑似要素に問題があるかどうかを知りたいと思っていました:last-child。

Answer 1

@Andreは、疑似要素とそのサポートに問題があることは正しいですが、特に古い（IE）ブラウザーでは、そのサポートは常に改善されています。

あなたの質問に関しては、何か問題はありますか、私は実際には何も見たことがないと思いますが、疑似要素の構文は、特に最初にそれをサスアウトするときに少しトリッキーになる可能性があります。それで：

div#top-level
  declarations: ...
  div.inside
    declarations: ...
    &:first-child
      declarations: ...

予想どおりにコンパイルされます。

div#top-level{
  declarations... }
div#top-level div.inside {
  declarations... }
div#top-level div.inside:first-child {
  declarations... }

「sassはcssが実行できるすべてのことを実行できる」というステートメントを除いて、これに関するドキュメントは見たことがありません。いつものように、HamlとSASSではインデントがすべてです。

Answer 2

私は（私の経験のために）使用する方が良いと思います：:first-of-type、、。ルールを少し変更するだけで実行できますが、セレクターよりもはるかに多くのことができました。:nth-of-type():last-of-type*-of-type*-child

Answer 3

これは私が通常疑似要素を書く方法:first-childで:last-childあり:nth-child(n)、sassで

.my-class {
    &:first-child {
       // your css code             
    }

    &:last-child {
       // your css code             
    }

    &:nth-child(2) {
       // your css code             
    }
}

Answer 4

まず第一に、これらの疑似要素（つまり、：first-child、：last-child）をサポートしていないブラウザーがまだ存在するため、この問題に「対処」する必要があります。

疑似要素を使用せずにそれを機能させる方法の良い例があります。

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

       -仕切りパイプの例を参照してください。

お役に立てば幸いです。