登录  /  注册
首页 > web前端 > css教程 > 正文

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

黄舟
发布: 2016-12-28 16:20:01
原创
1208人浏览过

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)!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号