21

:first-child同じ要素で CSSを:last-child使用すると機能しないことに気付きました。使用されるのは 1 つだけです。それはなぜなのか、CSS で回避策があるのだろうかと思っています。私にはCSSのバグのようです-最初の要素が最後の要素になることもあります。

その件については、Google で何も見つかりませんでした。各チュートリアルでは、少なくとも 2 つの要素があることを前提としています。

「最初の子も最後の子」セレクターのようなものを探しています。それは存在しますか？

4

2 に答える 2

41

それはなぜなのか、CSS で回避策があるのだろうかと思っています。私にはCSSのバグのようです-最初の要素が最後の要素になることもあります。

バグではありません。これがカスケードのしくみです。要素が最初の子と最後の子の両方である場合:first-child、別:last-childのルールに と があり、両方が同じ要素に一致する場合、後で宣言されたルールまたはより具体的なルールのすべてが他方をオーバーライドします。

この動作の例をここで見つけることができます。省略形プロパティと、border-radius省略形の代わりにコンポーネント プロパティを使用すること、および次のセレクタのいずれかを使用して完全に別のルールを指定することを含む回避策があります...

「最初の子も最後の子」セレクターのようなものを探しています。それは存在しますか？

文字通り、次のように両方の疑似クラスを連鎖させます。これは正常に機能します。

:first-child:last-child

ただし、同じように動作する特別な疑似クラスが存在します。

:only-child

これら 2 つのセレクターの主な違い (実際には唯一の違い) は特異性です。最初のセレクターには、追加の擬似クラスが 1 つ含まれているため、より具体的です。:last-childと:only-childはどちらも各ブラウザのまったく同じバージョンでサポートされているため、ブラウザのサポートにも違いはありません。

于 2012-08-23T14:22:45.177 に答える
4

私はこれに大幅に遅れていることに気づきましたが、CSS:first-of-typeと:last-of-type. 例えば：

<blockquote>
  <p>Some text you want to quote</p>
</blockquote>

この CSS は段落に引用符を追加します。

blockquote{
  quotes: "“" "”" "‘" "’";
}

blockquote p:first-of-type:before{
  content:open-quote;
}

blockquote p:last-of-type:after{
  content:close-quote;
}
于 2016-03-26T01:23:35.233 に答える