伪类选择器

• :link

  应用于未被访问的链接。IE6不兼容，可以直接用<a></a>标签代替

• :visited

  应用于已经被访问的链接

• :hover

  应用于鼠标指针悬停时的效果。IE6只是用于<a></a>链接，IE7之后适用于所有元素

• :active

  应用于已经被激活的元素，如被点击过的元素、被按下的按钮等

• :focus

  应用于键盘输入焦点的元素

• :first-child

  用于选择自身是第一个子元素的元素。如：

  <div>
    <span>第一个子元素</span>
    <span>第二个子元素</span>
    <span>第三个子元素</span>
  </div>
  

  选择div中的第一个span标签：

  span:first-child {
    这是第一个子元素
  }
  

伪元素选择器

伪元素是控制内容，在CSS3中是两个冒号

• :first-line

  控制文本第一行的内容

• :first-letter

  控制文本首个单词字母或者首个汉字

• :before与:after

  用于设置元素之前跟之后的内容。可以通过before与after来设置清除（闭合）浮动

  <div class="clearfix">
      梦想属于每一个人，广大劳动群众要敢想敢干、敢于追梦
      <div class="fl"></div>
  </div>
  <style>
      div {
        border: 1px solid red;
      }
  
      .fl {
        background-color: aqua;
        width: 200px;
        height: 200px;
        float: right;
      }
  
      .clearfix::before,
      .clearfix::after {
        content: " ";/* 空格 兼容Opera浏览器 */
        display: table;
      }
  
      .clearfix::after {
        clear: both;
      }
  
      .clearfix {
        /* 兼容IE 6/7 */
        zoom: 1;
      }
    </style>