CSS 2.1 :after
とCSS 3 ::after
疑似セレクタ(旧式のブラウザでは::after
以外のもの)との間に機能的な違いはありますか?より新しい仕様を使用する実用的な理由はありますか?:afterとafter ::
答えて
擬似クラスと擬似要素の区別です。 (しばらくの周りされているとあなたがIE8のサポートが必要な場合は、単一のコロンで使用することができます)::first-line
、::first-letter
、::before
と::after
を除き
は、要素がダブルコロンを必要と擬似。
擬似クラスを使用すると、たとえば、divの中で最初または特定<p>
年代を選択するための:first-child
または:nth-of-type(n)
を使用することができ、実際の要素自体を選択し。
(そしてまた:hover
と:focus
のような実際の要素の状態。)
擬似要素は、自分の権利の要素ではない事を::first-line
か::first-letter
のような要素のサブ部分をターゲット。実際
、ここではより良い説明:http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
また、ここで:::after
ようhttp://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
CSSセレクタは、DOMツリー内の明示的な要素として使用することはできませんいくつかの仮想的な要素です。彼らは「Pseudo-Elements」と呼ばれ、要素(例えば:::before
、::after
)前/後挿入にいくつかのコンテンツを使用している(:::first-letter
など)要素の一部を選択か、。現在のところ、5つの標準的な擬似要素:after, before, first-letter, first-line, selection
しかありません。一方
、(:hover
、:focus
、:nth-child(n)
などのような)要素の特別状態を定義するために使用される「Pseudo-Classes」と呼ばれるセレクタの他のタイプがあります。これらは、DOM内の既存の要素全体を選択します。擬似クラスは30以上の項目を持つ長いリストです。
最初に(CSS2とCSS1で)、シングルコロン構文が擬似クラスと擬似要素の両方に使用されました。しかし、CSS3では、::
の構文が、擬似要素の表記を:
の表記に置き換えて、それらをよりよく区別しました。
下位互換性のために、古いシングルコロン構文は、:after
のような疑似要素に対しても許容されます(ブラウザはすべてセミコロンで1つの古い構文をサポートします)。 IE8は新しい構文をサポートしていません(IE8をサポートしたい場合はシングルコロンを使用してください)。
- 1. FtpWebRequest.GetRequestStream()disconnect after after
- 2. Erlang after after
- 3. cmake include_directories order after AFTER/BEFORE
- 4. NSTimer After Afterユーザーが放棄するアプリケーション
- 5. Jquery Droppable Center Image After After Dropイベント
- 6. httpclient PostAsJsonAsync errors after(n)messages after(ポート枯渇)
- 7. :: afterと:afterの違いは何ですか?
- 8. popBackStack()after saveInstanceState()
- 9. memset after malloc
- 10. Jquery dom after .post
- 11. if文after
- 12. "Restart" after number 360
- 13. Where And And after $
- 14. pg_catalog.pg_class.relfilenode after truncate
- 15. VB.NET:チェックボックスリスト:* after * ItemChecked
- 16. jQuery fadeIn()after()
- 17. select endDate after startDate
- 18. After Effectsオンライン/クラウドレンダリング
- 19. ワードプレスwp_nav_menu before after
- 20. %after end = "" Python3で
- 21. jquery prebody after body
- 22. jQueryのホバーエフェクト:: after
- 23. position:relative3 after translate3d
- 24. sleep after kill
- 25. Jsoup baseUri after select
- 26. bash expect *** after stop ***
- 27. Ajax load after loader
- 28. After Effectsのウィグルパス
- 29. CSSセレクタ:after
- 30. JUnit before/after
"疑似セレクタ"(質問からの)は、無意味な用語であることがこの区別のためです。今までそれを使用しないでください。 – BoltClock
の両方について話している場合を除きます。または一般的な言葉で。 – albert
これは理論の素晴らしい説明ですが、それは実際の問題に関係していますか?実際には、css3仕様を使用すると、css2が同じ仕事をするという利点がありますか?もっと多くのブラウザでは? – DRosenfeld