css伪类与伪元素

css中除了经常使用的id(#),class(.),元素(p,body)等还有根据元素状态来分伪类和伪元素，以前用的很少，概念有点模糊，借此从新学习了解

伪类

• 最多见的：:link,:visited,visited,:hover,:active

a:link {color: #FF0000}     /* 未访问的连接 */
a:visited {color: #00FF00}  /* 已访问的连接 */
a:hover {color: #FF00FF}    /* 鼠标移动到连接上 */
a:active {color: #0000FF}   /* 选定的连接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 以后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 以后，才是有效的。
提示：伪类名称对大小写不敏感。
提示：为了保证伪类在 IE 中正常工做，声明 <!DOCTYPE>。

• :focus：向拥有键盘输入焦点的元素添加样式。(经常使用于改变input输入框样式)
  —> 默认： —>修改:

<style type="text/css"> input { outline: none; border: none; border: 1px solid #ccc; background-color: #ededee; } input:focus { background-color: #fff; box-shadow: 0 0 5px green; } </style>
    <form>
        <input type="text" name="name" placeholder="姓名">
    </form>

• :first-child：向元素的第一个子元素添加样式。

• :lang：向带有指定 lang 属性的元素添加样式。(表示没用到！！)

伪元素

• :first-letter向文本的第一个字母添加特殊样式。(经常使用于大字报)
  –>

• :first-line向文本的首行添加特殊样式。

• :before在元素以前添加内容。（css3中为了与伪类区别使用::before）
• :after在元素以后添加内容。（css3中为了与伪类区别使用::after）

:before，:after的用法不少好比：

1. 与CSS内容生成配合使用更多使用例子
   –>生成半边文字
   

2. 画三角形画三角形具体教程