CSSで疑似クラスと疑似要素を使用する方法-CSSチュートリアル-php.cn

CSSで疑似クラスと疑似要素を使用する方法

清浅

リリース： 2018-11-24 10:22:44

オリジナル

2877 人が閲覧しました

疑似クラスは、link や hover などのメソッドを通じてセレクターに特殊効果を追加できます。疑似要素は、: first-line を通じて最初の行のスタイルを追加し、: first を通じて最初の文字を追加できます。この 2 つの側面については、後で詳しく説明します。

疑似クラス

特定の部分を選択する方法です。ユーザー介入によって出入りするときの要素の動的な状態は、原則として HTML ドキュメントツリー自体とその要素または属性に属さないことを示します。実際には、CSS 疑似クラスが使用されます。セレクター、および擬似の特殊効果を追加します。さまざまな要素、擬似クラスはセレクターチェーンのどこにでも出現できます。

例

a: リンクは未訪問のリンクを表します

<style>
a:link{
background-color: pink;
}

ログイン後にコピー

Image 1.jpg

a: visit は訪問済みのリンクを表します

a:visited{
background-color: pink;
}

ログイン後にコピー

Image 7.jpg

a: マウスを移動するとホバーしますリンク時

a:hover{
background-color: pink;
}

ログイン後にコピー

Image 1.jpg

#a:hover を有効にするには、a:link と a:visited の後に配置する必要があります。

a: active: 選択されたリンクを示します

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;
}

ログイン後にコピー

Image 6.jpg

active を有効にするには、ホバー後に使用する必要があることに注意してください

疑似要素

疑似要素は、特定のセレクターに特殊効果を設定するために使用され、外部およびドキュメントレベルにのみ適用できます。インラインスタイルの代わりに。これらはセレクターチェーンの最後にのみ表示され、各セレクターは 1 つの疑似要素のみを指定できます。単一の要素構造で複数の擬似要素を処理するには、複数のスタイルセレクターまたは宣言ステートメントを作成する必要があります。

: 最初の行の擬似要素

は、テキストの最初の行に特別なスタイルを設定するために使用され、ブロックレベルの要素にのみ使用できます

変更可能次の属性のフォント、色、背景、単語間隔、文字間隔など。

p:first-line 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>

ログイン後にコピー

は最初の行に適用されます

Image 8.jpg

: 最初の文字の擬似要素

は、テキストの最初の文字に特別なスタイルを設定するために使用されます:

は、フォント、色、背景、マージン、パディング、境界線、およびその他の属性を変更できます。

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!

ログイン後にコピー

最初の文字にのみ適用されます

Image 9.jpg

要約: 上記がこの記事の全内容です。皆様の学習に役立つことを願っています。

以上がCSSで疑似クラスと疑似要素を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSSで疑似クラスと疑似要素を使用する方法