CSS擬似要素で::の前と後に::
CSS ::広く日常の開発で使用されている、と彼らは私たちのドキュメントの構造を利用することができた後、前と::はより簡潔です。しかし、多くの人が::それでも特に理解していた後、前に::、彼らは正確に何をしていますか？どのようにそれらを使用するには？ときに私はそれらを使用する必要がありますか？著者は、擬似要素の使用におけるいくつかの理解と経験をまとめたもの。
まず、コンセプト：
1.定義
The CSS ::before(::after) 擬似要素は、 選択された要素の仮想最初の（最後の）子と一致します。一般的に使用して要素に化粧品のコンテンツを追加するために使用されている content CSSプロパティを。この要素は、デフォルトでは、インラインです。
定義によると、私たちは前に::知っていると::仮想要素を照合した後、主に現在のコンテンツの装飾的な要素を高めるために使用されます。彼のショーの内容は、「独自のあるcontentデフォルトはインライン要素です」。
実際には::前と:: CSSを導入された後、のコア目的、または意味達成するためです。当社の実際の開発時間では、多くの場合、いくつかの効果を達成するために、文書内のノード数がない実際のコンテンツを作成し、この経験を持っているなど、参加またはテキストのスタイルを支援します：
<スタイル>
UL {
リストスタイル：なし。
}
のLi {
ディスプレイ：インライン。
}
</スタイル>
<ナビゲーション>
<UL>
<LI> HTML 5 </ LI>
<LI> | </ LI>
<LI> CSS3ます。</ li>
<LI> | </ LI>
<LI> JavaScriptを</ LI>
</ UL>
</ NAV>
ときにこのような番組：
明らかに、の例「|」が表示されている場合のみブレーク文字、ない実用的な意義、そして彼が唯一作成した装飾のため、これは、文書内に作成すべきではないたのli要素。そして、彼らにはなく、それのうちのスタイル（CSS）で行くことができないノードを作成しますか？
このような要求のために、前に、これらの二つの疑似要素の内装の現在の要素に相当した後:: ::生まれた、彼らは、ノードがDOMツリーに表示されますが、ディスプレイ上のノードとしないではありません効果。私たちは、コードの先頭に再建後::前に::を使用して：
<スタイル>
UL {
リストスタイル：なし。
}
のLi {
ディスプレイ：インライン。
}
リー：ありません（：最後の子）:: {後の
内容： "|"。
}
</スタイル>
<ナビゲーション>
<UL>
<LI> HTML 5 </ LI>
<LI> CSS3ます。</ li>
<LI>のJavaScriptます。</ li>
</ ulの>
</ NAV>
表示は変わりませんが、文書の構造がより明確になります。
2.
::前と::使用することは非常にシンプル後、それは二つの要素が存在する要素に次々と考えることができ、これらの2つの要素は、デフォルトでは、インライン要素ですが、私たちは自分のスタイルに追加することができます。:: ::利用の時間が注意を払う必要があります前と後、あなたがそうでなければ、これらの2つの擬似要素が表示されない、コンテンツを設定する必要があります。コンテンツプロパティ、その内容はその中に埋め込まれた疑似要素の通りです。以下のような：
<スタイル>
P：{の前に
コンテンツ： "H"。
P：{後に
コンテンツ"D"。
}
</スタイル>
<P>ワールello </ P>
完全なHello Worldのを表示します。
::前と::仮想要素が上、文書の実際の要素の位置には影響しません後：影響されることはありません最後の子擬似クラスセレクタ：最初の子か。
3.操作
::前と::むしろ、前の例では、対応するNodeオブジェクトを見つけdocumontされていないノード、というより仮想ノード、後に、私たちは、jsの次のコードを実行します。
console.log（document.querySelector（ "UL"）。のchildNodes）;
唯一の3つのノード、及び2つのダミー要素がオブジェクトではないのNodeListオブジェクトが得られます。::前と後の::ではない本当のノードので、私たちはそれらを取得していない、クリックや他のユーザー設定は、イベントを送信しません。::前と::の後、イベントを設定するだけでなく、ユーザーのイベントをキャプチャして、擬似要素にイベント「バブル」の要素が配置されていないが。理由は引用符で囲まれた「バブル」という言葉、彼は本当にバブリングされなかったため、より正確に::と::イベントが行く要素をキャプチャするために貢献した後、srcElementオブジェクトイベントが要素である前に、擬似要素むしろ擬似要素自体より。
文書が得られ、ノードオブジェクト::後::対応する前に、それのような、スタイルプロパティCSSのインターフェイスによって取得されてもよいことはできません。
window.getComputedStyleが（
document.querySelector（ '李'）、 '：前'
）
CSSStyleDeclarationオブジェクトを返します、あなたは現在のスタイル値を取得することができます。
：より転載https://www.cnblogs.com/laden666666/p/6089880.html
画像のフォントは何ですか？
同様の絵フォントは、使用中に、スタイル、およびスタイルを変更することができ、時には再デザイン（色、傾き）に必要な画像を変更します
アイコンフォントを使用するには？
具体的な方法は、IcoMoon以下に示します。
1、オープンIcoMoonサイト、IconMoonアプリケーションをクリックします。
2、特定のアイコン・インターフェースを開いた後、あなたはまた、から選択する複数のアイコンを見るにはクリックしてくださいライブラリからアイコンを追加するデフォルトのアイコンの下で、彼は与えアイコンを使用することができ、生成するために、独自のアイコンを追加することができます（無料支払いました）。
3.フォントがフォントのダウンロードの生成の右下隅になり、現在選択されているのインタフェースアイコンを生成生成する、あなたはまた、関連する設定をダウンロードすることができます（例：サポートクラスIE6 / 7てみましょう）。
図4は、ダウンロードが完了した後、これらのファイルは、最良任意に削除しないで、保存されている以下のファイルを持っています。
5、その後、具体的な使用のアイコンフォントを与える（あなたはまた、自己--style.cssフォントアイコンのCSSファイルを使用して関連コンテンツを見ることができます）
コピー（1）、プロジェクトにフォントフォルダやフォントを宣言し、なぜ複数のファイルの導入、一部のブラウザでは形式が同じではありませんサポートしているため（基本的にはすべて同じ、あなたが直接コピーすることができますので、ここでのコードは、メモリを必要としません）
フォント - スタイル：ノーマル; }
（2）フォントを使用して
.IconMoon { フォント -family 'icomoon' 。 }
（3）、特に対応するアイコン表示
前に添加する擬似要素を使用してCSSセレクタ
<LI> <スパンクラス= "アイコンホーム"> ホームアイコン</スパン> </ LI>が前に本で <LI> <スパンクラス= "アイコンsmile2">その前にsmile2アイコン</スパン> </ LI> <LI> <スパンクラス= "アイコンtongue2">たフロントtongue2アイコン</スパン> </ LI>に <LI> <スパンクラス= "アイコンSAD2">前述でSAD2アイコン</スパン> </ LI> <LI> <スパンクラス= "アイコンウィンク">このフロントアイコンでウィンク</スパン> </ LI>
に対応したCSSコード：
.icon-家：{の前に/ * 内容的值是对应的图标代码* /
内容： "\のE900" 。
}
.icon - smile2：前{
内容： "\ e9e2" 。
}
.icon - tongue2：前{
内容： "\ e9e4" 。
}
.icon - SAD2：前{
内容： "\ e9e6" 。
}
.icon - ウィンク：{前
内容： "\ e9e7" 。
}
前に言ったように（4）、これらのアイコンの性質上のフォントがあるので、あなたは簡単に色、サイズを変更することができ、影の効果をキャスト
可能性のあるコード
私たちはフォントディレクトリにファイルをダウンロードする前に、単純にIconMoonアプリページに、再度、Webサイトを開き、[OK]をクリックしますインポートアイコンがselection.jsonなり、新しいフォントアイコンまたはマイナスアイコンを追加したい6、あなたは再び上で私たちの以前の操作に基づいて選択し、使用することは非常に便利なことができます。
上記関連する中国のPHPのWeb関連コンテンツの概要です。
CSS ::広く日常の開発で使用されている、と彼らは私たちのドキュメントの構造を利用することができた後、前と::はより簡潔です。しかし、多くの人が::それでも特に理解していた後、前に::、彼らは正確に何をしていますか？どのようにそれらを使用するには？ときに私はそれらを使用する必要がありますか？著者は、擬似要素の使用におけるいくつかの理解と経験をまとめたもの。
まず、コンセプト：
1.定義
The CSS ::before(::after) 擬似要素は、 選択された要素の仮想最初の（最後の）子と一致します。一般的に使用して要素に化粧品のコンテンツを追加するために使用されている content CSSプロパティを。この要素は、デフォルトでは、インラインです。
定義によると、私たちは前に::知っていると::仮想要素を照合した後、主に現在のコンテンツの装飾的な要素を高めるために使用されます。彼のショーの内容は、「独自のあるcontentデフォルトはインライン要素です」。
実際には::前と:: CSSを導入された後、のコア目的、または意味達成するためです。当社の実際の開発時間では、多くの場合、いくつかの効果を達成するために、文書内のノード数がない実際のコンテンツを作成し、この経験を持っているなど、参加またはテキストのスタイルを支援します：
<スタイル>
UL {
リストスタイル：なし。
}
のLi {
ディスプレイ：インライン。
}
</スタイル>
<ナビゲーション>
<UL>
<LI> HTML 5 </ LI>
<LI> | </ LI>
<LI> CSS3ます。</ li>
<LI> | </ LI>
<LI> JavaScriptを</ LI>
</ UL>
</ NAV>
ときにこのような番組：
明らかに、の例「|」が表示されている場合のみブレーク文字、ない実用的な意義、そして彼が唯一作成した装飾のため、これは、文書内に作成すべきではないたのli要素。そして、彼らにはなく、それのうちのスタイル（CSS）で行くことができないノードを作成しますか？
このような要求のために、前に、これらの二つの疑似要素の内装の現在の要素に相当した後:: ::生まれた、彼らは、ノードがDOMツリーに表示されますが、ディスプレイ上のノードとしないではありません効果。私たちは、コードの先頭に再建後::前に::を使用して：
<スタイル>
UL {
リストスタイル：なし。
}
のLi {
ディスプレイ：インライン。
}
リー：ありません（：最後の子）:: {後の
内容： "|"。
}
</スタイル>
<ナビゲーション>
<UL>
<LI> HTML 5 </ LI>
<LI> CSS3ます。</ li>
<LI>のJavaScriptます。</ li>
</ ulの>
</ NAV>
表示は変わりませんが、文書の構造がより明確になります。
2.
::前と::使用することは非常にシンプル後、それは二つの要素が存在する要素に次々と考えることができ、これらの2つの要素は、デフォルトでは、インライン要素ですが、私たちは自分のスタイルに追加することができます。:: ::利用の時間が注意を払う必要があります前と後、あなたがそうでなければ、これらの2つの擬似要素が表示されない、コンテンツを設定する必要があります。コンテンツプロパティ、その内容はその中に埋め込まれた疑似要素の通りです。以下のような：
<スタイル>
P：{の前に
コンテンツ： "H"。
P：{後に
コンテンツ"D"。
}
</スタイル>
<P>ワールello </ P>
完全なHello Worldのを表示します。
::前と::仮想要素が上、文書の実際の要素の位置には影響しません後：影響されることはありません最後の子擬似クラスセレクタ：最初の子か。
3.操作
::前と::むしろ、前の例では、対応するNodeオブジェクトを見つけdocumontされていないノード、というより仮想ノード、後に、私たちは、jsの次のコードを実行します。
console.log（document.querySelector（ "UL"）。のchildNodes）;
唯一の3つのノード、及び2つのダミー要素がオブジェクトではないのNodeListオブジェクトが得られます。::前と後の::ではない本当のノードので、私たちはそれらを取得していない、クリックや他のユーザー設定は、イベントを送信しません。::前と::の後、イベントを設定するだけでなく、ユーザーのイベントをキャプチャして、擬似要素にイベント「バブル」の要素が配置されていないが。理由は引用符で囲まれた「バブル」という言葉、彼は本当にバブリングされなかったため、より正確に::と::イベントが行く要素をキャプチャするために貢献した後、srcElementオブジェクトイベントが要素である前に、擬似要素むしろ擬似要素自体より。
文書が得られ、ノードオブジェクト::後::対応する前に、それのような、スタイルプロパティCSSのインターフェイスによって取得されてもよいことはできません。
window.getComputedStyleが（
document.querySelector（ '李'）、 '：前'
）
CSSStyleDeclarationオブジェクトを返します、あなたは現在のスタイル値を取得することができます。
：より転載https://www.cnblogs.com/laden666666/p/6089880.html
画像のフォントは何ですか？
同様の絵フォントは、使用中に、スタイル、およびスタイルを変更することができ、時には再デザイン（色、傾き）に必要な画像を変更します
アイコンフォントを使用するには？
具体的な方法は、IcoMoon以下に示します。
1、オープンIcoMoonサイト、IconMoonアプリケーションをクリックします。
2、特定のアイコン・インターフェースを開いた後、あなたはまた、から選択する複数のアイコンを見るにはクリックしてくださいライブラリからアイコンを追加するデフォルトのアイコンの下で、彼は与えアイコンを使用することができ、生成するために、独自のアイコンを追加することができます（無料支払いました）。
3.フォントがフォントのダウンロードの生成の右下隅になり、現在選択されているのインタフェースアイコンを生成生成する、あなたはまた、関連する設定をダウンロードすることができます（例：サポートクラスIE6 / 7てみましょう）。
図4は、ダウンロードが完了した後、これらのファイルは、最良任意に削除しないで、保存されている以下のファイルを持っています。
5、その後、具体的な使用のアイコンフォントを与える（あなたはまた、自己--style.cssフォントアイコンのCSSファイルを使用して関連コンテンツを見ることができます）
コピー（1）、プロジェクトにフォントフォルダやフォントを宣言し、なぜ複数のファイルの導入、一部のブラウザでは形式が同じではありませんサポートしているため（基本的にはすべて同じ、あなたが直接コピーすることができますので、ここでのコードは、メモリを必要としません）
フォント - スタイル：ノーマル; }
（2）フォントを使用して
.IconMoon { フォント -family 'icomoon' 。 }
（3）、特に対応するアイコン表示
前に添加する擬似要素を使用してCSSセレクタ
<LI> <スパンクラス= "アイコンホーム"> ホームアイコン</スパン> </ LI>が前に本で <LI> <スパンクラス= "アイコンsmile2">その前にsmile2アイコン</スパン> </ LI> <LI> <スパンクラス= "アイコンtongue2">たフロントtongue2アイコン</スパン> </ LI>に <LI> <スパンクラス= "アイコンSAD2">前述でSAD2アイコン</スパン> </ LI> <LI> <スパンクラス= "アイコンウィンク">このフロントアイコンでウィンク</スパン> </ LI>
に対応したCSSコード：
.icon-家：{の前に/ * 内容的值是对应的图标代码* /
内容： "\のE900" 。
}
.icon - smile2：前{
内容： "\ e9e2" 。
}
.icon - tongue2：前{
内容： "\ e9e4" 。
}
.icon - SAD2：前{
内容： "\ e9e6" 。
}
.icon - ウィンク：{前
内容： "\ e9e7" 。
}
前に言ったように（4）、これらのアイコンの性質上のフォントがあるので、あなたは簡単に色、サイズを変更することができ、影の効果をキャスト
可能性のあるコード
私たちはフォントディレクトリにファイルをダウンロードする前に、単純にIconMoonアプリページに、再度、Webサイトを開き、[OK]をクリックしますインポートアイコンがselection.jsonなり、新しいフォントアイコンまたはマイナスアイコンを追加したい6、あなたは再び上で私たちの以前の操作に基づいて選択し、使用することは非常に便利なことができます。
上記関連する中国のPHPのWeb関連コンテンツの概要です。