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

黄舟原创: 2016-12-28 16:20:01 997浏览

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中文网（m.sbmmt.com）！

css 伪类伪元素 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：css的显示模式display记录笔记下一条：css的常用操作示例