ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSの擬似オブジェクトとは何ですか
CSSの擬似オブジェクトとは何ですか
- WBOYオリジナル
- 2022-06-06 18:14:581945ブラウズ
CSS では、要素に仮想タグを付加するのが擬似オブジェクトです。これを CSS で読み込むことで、HTML のリソースのオーバーヘッドを節約できます。デフォルトは row 要素であり、変換できます。構文は " element::pseudo-object{content:" "...";}"; 擬似オブジェクト スタイルには content 属性が必要です。それ以外の場合、擬似オブジェクトは無効になります。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css の擬似オブジェクトとは
概念: CSS によって読み込まれた要素に仮想タグを追加することで、HTML のリソース オーバーヘッドを節約できます。 content 属性、デフォルトは row 要素であり、変換可能です。
::after: 指定したタグの後にオブジェクトを追加します。
::before: 指定したタグの前にオブジェクトを追加します。
content: 要素内のコンテンツ (コンテンツタグは書き込めません)
構文:
元素::after{
content:"";
}注: 擬似オブジェクト スタイルには、content 属性が必要です。そうでない場合、擬似オブジェクトは無効です。
もう 1 つ学ぶべきトリック: 公式には二重コロンが推奨されていますが、通常は互換性を高めるために単一コロンを使用します
上記の 2 つの疑似オブジェクト セレクターは、属性 content
<style type="text/css">
.box{width:200px;background:#f00;height:300px;}
.box::before{
content:'开头的内容';height:100px;
line-height:100px;color:#fff;background:#00f;
}
.box::after{
content:'这是一个段落';
background-color:green;
display:block;height:50px;
}
</style>
</head>
<body>
<div class="box"></div>## と組み合わせて使用する必要があります。 #レンダリング
css ビデオ チュートリアル)
以上がCSSの擬似オブジェクトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。