CSS 疑似要素LOGIN

CSS 疑似要素

CSS 擬似要素

CSS 擬似要素は、セレクターに特殊効果を追加するために使用されます。

構文

疑似要素の構文:

selector:pseudo-element {property:value;}

CSS クラスでも疑似要素を使用できます:

selector.class:pseudo-element {property:value;}

:first-line 擬似要素

「first-line」擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されます。

注: 「first-line」疑似要素は、ブロックレベルの要素にのみ使用できます。

注: 次のプロパティを「最初の行」擬似要素に適用できます:

font プロパティ

color プロパティ

background プロパティ

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

:first-letter 擬似要素

"first-letter" 擬似要素は、テキストの最初の文字に特別なスタイルを設定するために使用されます

注: "first-letter" " 疑似要素はブロックレベルの要素でのみ使用できます。

注: 次のプロパティを「first-letter」擬似要素に適用できます:

font プロパティ

color プロパティ

background プロパティ

margin プロパティ

padding プロパティ

border プロパティ

text-decoration

vertical -align ("float" が "none" の場合のみ)

text-transform

line-height

float

clear

疑似要素と CSS クラス

疑似要素はCSS クラスと組み合わせることができます:

p.article:first-letter {color:#ff0000;}

<p class="article">記事内の段落</p>

上記の例は次のようになりますクラス記事を含むすべての段落の最初の文字が赤になります。

複数の疑似要素

は、複数の疑似要素と組み合わせて使用​​できます。

以下の例では、段落の最初の文字が赤色で表示され、フォントサイズはxx-largeになります。最初の行の残りのテキストは青色で、小さな大文字で表示されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line 
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

CSS - :before 擬似要素

":before" 擬似要素は、要素のコンテンツの前に新しいコンテンツを挿入できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before 伪元素示例</title>
<style type="text/css" media="all">
div::before
{
background: lightgreen;
content: "张三";
}
</style>
</head>
<body>
<div>今天来学习知识</div>
</body>
</html>

CSS - :after 擬似要素

「:after」擬似要素は、要素のコンテンツの後に新しいコンテンツを挿入できます。

りー


次のセクション
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS ::before 伪元素示例</title> <style type="text/css" media="all"> div::before { background: lightgreen; content: "张三"; } </style> </head> <body> <div>今天来学习知识</div> </body> </html>
コースウェア