CSSの擬似オブジェクトとは何ですか-フロントエンドQ&A-php.cn

CSSの擬似オブジェクトとは何ですか

WBOY

リリース： 2022-06-06 18:14:58

オリジナル

1950 人が閲覧しました

CSS では、要素に仮想タグを付加するのが擬似オブジェクトです。これを CSS で読み込むことで、HTML のリソースのオーバーヘッドを節約できます。デフォルトは row 要素であり、変換できます。構文は " element::pseudo-object{content:" "...";}"; 擬似オブジェクトスタイルには content 属性が必要です。それ以外の場合、擬似オブジェクトは無効になります。

CSSの擬似オブジェクトとは何ですか

このチュートリアルの動作環境: 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:&#39;开头的内容&#39;;height:100px;
line-height:100px;color:#fff;background:#00f;
}
.box::after{
content:&#39;这是一个段落&#39;;
background-color:green;
display:block;height:50px;
}
</style>
</head>
<body>
<div class="box"></div>

ログイン後にコピー

## と組み合わせて使用する必要があります。 #レンダリング

CSSの擬似オブジェクトとは何ですか