ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS の基礎学習 10: 擬似要素_html/css_WEB-ITnose
CSS の基礎学習 10: 擬似要素_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:411000ブラウズ
前回のブログは疑似クラスについてでした。今回は疑似要素について話します。前回のブログでリークした疑似クラスを補足しましょう:: フォーカス疑似カテゴリ
(1) 定義と使用法
: フォーカス疑似カテゴリは、要素がフォーカスされているときに要素に特別なスタイルを追加します。注 IE ブラウザはこの属性をサポートしていません。明说 (2) 擬似カテゴリがフォーカス要素に適用されていることを説明します。たとえば、HTML のテキスト入力フォーカスのある入力ボックスには、テキスト入力カーソルが表示されます。つまり、ユーザーが入力を開始すると、テキストがこの入力ボックスに
入力されます。他の要素 (ハイパーリンクなど) にもフォーカスを設定できますが、CSS ではどの要素にフォーカスを設定できるかが定義されていません。
a:link {color: #FF0000} /* 未访问的链接 */a:focus {color: #00FF00} /* 获得焦点的链接 */ 他のセレクターを組み合わせた別の例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">a.red:visited {color: #FF0000;}</style></head><body><a class="red" href="http://www.baidu.com">百度一下，你就知道</a></body></html> 上記の例のリンクが訪問されている場合、そのリンクは赤色で表示されます。そうすると操作結果もこんな感じになります。 (3) 例: フォーカスされた入力フィールドの色を指定する完全なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">input:focus{background-color:yellow;}</style></head><body><form action="form_action.asp" method="get">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="Submit" /></form><p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p></body></html> 実行結果は次のとおりです: ブラウザのサポート
すべての主要なブラウザのサポート: focus pseudo class 。注: Internet Explorer 8 (以降)
次に、疑似要素について話しましょう
CSS 疑似要素は、特定のセレクターに特殊効果を設定するために使用されます。
構文
疑似要素の構文 (疑似クラスと同じ):
off ’ s ’ s ‐ ‐ ‐ ‐ ‐ 疑似要素で使用する部分:
Selector.class:pseudo -element {property:value ;}
(1):first-line 擬似要素
":first-line" 擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されます。
次の例では、ブラウザは「first-line」疑似要素のスタイルに従って p 要素のテキストの最初の行を書式設定します:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">p:first-line {color: #ff0000;font-size:18px;}</style></head><body><p>出师未捷身先死，<br/>长使英雄泪满襟。</p></body></html> 操作の結果は次のとおりです:
注: 「first-line」疑似要素は、ブロックレベルの要素にのみ使用できます。注: 次の属性を「最初の行」擬似要素に適用できます:
Background
Word-spacing
text-decoration
暗いテキスト-変換
行の高さ
クリア
(2):first-letter 伪元素
":first-letter" 伪元素用向文本の首母设置特殊样式：
来看一例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">p:first-letter {color: #ff0000;font-size:18px;}</style></head><body><p>出师未捷身先死，<br/>长使英雄泪满襟。</p><hr/><p>两情若是久长时，又岂在朝朝暮暮</p></body></html> 実行の結果は次のとおりです: 注: 「最初の文字」の擬似要素は、ブロックレベルの要素にのみ使用できます。
‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ation
vertical-align (float が none の場合のみ)
text-transform
line-height
float
Clear
(3) 疑似要素と CSS クラス
疑似要素 CSS クラスで使用できます:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">p.article:first-letter{ color: #FF0000;}</style></head><body><p class="one">出师未捷身先死，<br/>长使英雄泪满襟。</p><hr/><p class="article">两情若是久长时，又岂在朝朝暮暮</p></body></html> 上記の例は、クラスを使用してすべての段落の最初の文字を反転します。記事を赤字にします。 結果実行の結果:
(4) 複数の擬似要素
は複数の擬似要素と組み合わせて使用できます。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并
以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">p:first-letter { color:#ff0000; font-size:xx-large; }p:first-line { color:#0000ff; font-variant:small-caps; }</style></head><body><p class="one">出师未捷身先死，<br/>长使英雄泪满襟。</p><hr/><p class="article">两情若是久长时，又岂在朝朝暮暮</p></body></html> 运行的结果为： :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个
元素前面插入一幅图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">p:before {content:url(01.jpg);}</style></head><body><p class="one">出师未捷身先死，<br/>长使英雄泪满襟。</p><hr/><p class="article">两情若是久长时，又岂在朝朝暮暮</p></body></html> 运行的结果为： :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个
元素后面插入一幅图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器演示</title><style type="text/css">p:after {content:url(01.jpg);}</style></head><body><p class="one">出师未捷身先死，<br/>长使英雄泪满襟。</p><hr/><p class="article">两情若是久长时，又岂在朝朝暮暮</p></body></html> 运行的结果为：
版权声明：本文为博主原创文章，未经博主允许不得转载。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。