css的伪类和伪元素使用示例
2016-06-15 14:16
260 查看
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>
相关文章推荐
- overflow:hidden清除浮动原理
- 【CSS学习】CSS背景background、background-position使用详解
- 12-CSS布局模型
- 写底部样式一定要加的属性
- CSS强制英文、中文换行与不换行 强制英文换行(转)
- CSS强制英文、中文换行与不换行 强制英文换行(转)
- 纯CSS设置Checkbox复选框控件的样式
- html css 行级标签 块级标签
- 通过jxl来生成,有单元格样式的excel
- 鼠标点击后的CSS3跑马灯效果
- CSS之密码强度检测
- 自定义网页滚动条样式插件malihu-custom-scrollbar-plugin的介绍和使用方法
- CSS选择器
- table完美css样式,table的基本样式,table样式
- 参考手册(html css)
- 2、HTML与CSS基础
- Grunt压缩、合并js/css文件
- css层叠样式的次序y
- CSS样式坑总结
- CSS3动画 ☞ animation-time-function ☞ step属性