CSS擬似要素

2656 ワード

CSS擬似要素はCSSセレクタの一種で、div+cssレイアウトでいくつかの特殊な効果を設定するために使用されます.
:first-letter
テキストの最初の文字に特殊なスタイルを追加します.中国語であれば最初の文字です.
:first-line
テキストの最初の行にスタイルを追加
:before
要素を指定する前にコンテンツを追加
:after
要素を指定した後にコンテンツを追加
なぜ偽元素と偽類を分けるのか分かりませんが、実は似ています.以下はいくつかの例のコードで、あなたもw 3 cschoolの上で見ることができて、これはとても良いウェブサイトで、駅を建てる多くの基本的なものをマスターすることができます.
1、:first-letter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
  p:first-letter{
     color:#B10000;
	 font-size:30px;
  }
  </style>
 </head>

 <body>
  <p>        ，           ！</p>
  <p>welcome to my blog!</p>
 </body>
</html>

2.:first-line

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
  p:first-line{
     color:#B10000;
	 font-size:30px;
  }
  </style>
 </head>

 <body>
  <p>        ，           ！</br>            。</p>
 </body>
</html>

3:beforeと:after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
  p:before{
     content:"Hello word!";
  }
  p:after{
    content:"Contact me!";
  }
  </style>
 </head>

 <body>
  <p>        ，           !</p>
 </body>
</html>

効果図はわざわざ貼らないでください.

selectスタイルの変更、および三角の置換

C#HashSet用法、Hashtable用法