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. 画三角形画三角形具体教程