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. 畫三角形畫三角形具體教程