コンテンツの役割: CSS における「.」

外部コンテナとしてpがある場合、内部pがfloat形式に設定されている場合、clearfixを適用した要素の最後にコンテンツを追加することで目的を達成できます。コンテナを開ける様子。 このコードの content: "."; は何に使用されますか?これはどのような問題を解決しますか?なぜ使用する必要があるのですか?

コードは次のとおりです:

.clearfix:after {
clear: ".";
display: block;

visibility: hidden;
1 --
HTML コードを書くときに、W3C 標準に準拠した Firefox などのブラウザーでは、外部コンテナーとして p があり、内部 p が float スタイルに設定されている場合、外部コンテナー p は内部が透明ではないため、伸ばすことができません。
このclearfix CSSはafter疑似オブジェクトを使用しており、clearfixが適用される要素の最後にコンテンツ内のコンテンツを追加します。ここではピリオド「.」が追加され、その表示はブロックに設定され、クリアは両方に設定されます。これにより、コンテナを開けるという目的が達成されます。

2--

content の構文はめったに使用されません。

文法:


コードは次のとおりです。
カウンター(名前、文字列、リストスタイルタイプ) | quote |
open-quote string |

Value:

コードは次のとおりです:

の alt 属性のテキストを使用します。 object


コードは次のとおりです:

counter(name)
:

名前付きカウンターを使用します

コードは次のとおりです:

counter(name, list-style-type)
:

名前付きカウンターを使用し、指定された list -style-type 属性に従います

コードは次のとおりです:


counters(name, string)

:

すべての名前付きカウンターを使用します

コードは次のとおりです:

counters(name, string,

list-style -type)

:

すべての名前付きカウンターを使用し、指定された list-style-type 属性に準拠します

コードは次のとおりです:

no- close-quote
:

quotes 属性の末尾タグを挿入しません。ただし、ネスト レベルを増やす

コードは次のとおりです:

no-open-quote

:

は quotes 属性の前のタグを挿入しません。ただし、ネストレベルを下げます

コードは次のとおりです:

close-quote

:

引用符属性のバックタグを挿入します

コードは次のとおりです:

open-quote

:

引用符属性の前タグを挿入します

コードは次のとおりです:

文字列

:

引用符で囲まれた

文字列

を使用します

コードは次のとおりです:

url(url )
:

指定された絶対または相対 URL アドレスの説明を使用します。:after および

:before

擬似要素と一緒に使用して、オブジェクトの前後にコンテンツを表示します。対応するスクリプト属性は content です。例:

コードは次のとおりです:

p:after { content: url("http:www.devguru.com");

text-decoration: none } p:before { content: url( "beep.wav") }

あなたが尋ねた質問: 文法によれば、それは「文字列: 引用符で囲まれた文字列を使用する」であるはずです。これは、この文字が .clearfix オブジェクトの後に表示されることを意味するはずです

以上がコンテンツの役割: CSS における「.」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。