<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css偽類-標籤的狀態;虛擬元素</title> <!-- 偽類 可以 被 標籤，id，class 指定使用--> <style> /*偽類將應用於未被訪問過的連結，與:visited互斥。*/ :link { color: red; } /*偽類將應用於有滑鼠指標懸停於其上的元素。*/ a:visited { color: green; } /*偽類將應用於被啟用的元素，如被點擊的連結、被按下的按鈕等。*/ a:hover { color: blue; } /*偽類將應用於被啟用的元素，如被點擊的連結、被按下的按鈕等。*/ a:active { color: orange; } .inputName:focus { background-color: orange; } /*虛擬元素 第一行*/ :first-line { } /*虛擬元素 第一個字元*/ :first-letter { } /*虛擬元素 第一個 子項目（第一個子項目是子項目的span標籤*/ span:first-child { font-size: 19px; color: brown; } /*虛擬元素 after before,指定 位置 插入 內容 content*/ .div1:after { /*after,before特有 屬性*/ content: "-------"; } </style> </head> <body> <a href="#">當前網頁</a> <a href="http://www.baidu.com">百度一下</a> <a href="http://itcast.cn">傳智播客官網</a> <a href="http://www.163.com">網易</a> <a href="http://www.sina.com">新浪</a> <br> <input type="text" class="inputName" value="123"> <hr> <div> <span>111</span> <span>222</span> <span>333</span> </div> <div class="div1"> <span>111</span> <span>222</span> <span>333</span> </div> </body> </html>
以上就是css的偽類和虛擬元素使用樣本的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
