伪类是元素不同状态表现的不同样式
伪元素是文档结构中没有出现的元素

1.静态伪类

  1. <!doctype html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.       a:link{
  8.         /*link:超链接在点击之前样式*/
  9.         color: deepskyblue;
  10.       }
  11.       a:visited{
  12.         /*visited:超链接在点击之后样式*/
  13.         color: skyblue;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <a href="#">点击下载</a>
  19.   </body>
  20. </html>

2.动态伪类

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         div:hover{
  8.             /*hover:鼠标放在元素上显示的样式*/
  9.             color: skyblue;
  10.         }
  11.         div:active{
  12.             /*active:鼠标点击时显示的样式*/
  13.             color: red;
  14.         }
  15.         input:focus{
  16.             /*focus:输入框获得焦点时的状态*/
  17.             color: red;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div>点击下载</div>
  23.     <input type="text" value="请输入....."/>
  24. </body>
  25. </html>

3.伪元素

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         div::first-letter{
  8.             /*first-letter：选择元素中的第一个文字*/
  9.             color: red;
  10.         }
  11.         div::first-line{
  12.             /*first-line：选择元素中的第一行文字*/
  13.             color: skyblue;
  14.         }
  15.         div::before{
  16.             /*before：在元素内容前加入内容*/
  17.             content: "作者:陶渊明";
  18.         }
  19.         div::after{
  20.             /*after：在元素内容后加入内容*/
  21.             content: "晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。........";
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div>
  27.         作品:《桃花源记》
  28.         <hr />
  29.     </div>
  30. </body>
  31. </html>