css的伪类和伪元素使用示例

2020-11-27 来源：爱站旅游

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的伪类和伪元素使用示例