css的伪类和伪元素使用示例
程序员文章站
2022-04-26 22:16:44
...
css中的 伪类 常用于 a标签的 状态设置,伪元素 设置 标签的 样式。
<!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的伪类和伪元素使用示例的内容,更多相关内容请关注PHP中文网(www.php.cn)!