css中的伪类和伪元素
伪类用单冒号
我们平时熟悉的a:link、a:visited、a:hover和a : active
伪元素用双冒号（为了更好的兼容我们也用单冒号）
常用的:before :after和 :first-line :first-letter ::selection
先看三篇博客：
http://blog.dimpurr.com/css-before-after/
http://blog.jobbole.com/49173/
<style>
div{
width:98px;height:48px;
border:2px solid red;
border-bottom:48px solid red;
border-radius:50%;
position:relative;
// transition:2s all ease;
}
div:before{
content:"";
position:absolute;
width:8px;height:8px;
background:#fff;
border:20px solid red;
left:0;top:50%;
border-radius:50%;
}
div:after{
content:"";
position:absolute;
width:8px;height:8px;
background:red;
border:21px solid #fff;
right:0;top:50%;
border-radius:50%;
}
</style>
<script>
window.onload=function () {
var div=document.getElementsByTagName("div")[0];
div.onmouseover=function () {
div.style.transform="rotate(180deg)";
}
div.onmouseout=function () {
div.style.transform="rotate(0deg)";
}
}
</script>
<body>
<div>
</div>
</body>
css中的伪类和伪元素的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
- css中伪类与伪元素的区别
一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- css伪选择器使用总结——css中关于伪类和伪元素的知识总汇
CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- css中伪类和伪元素
伪类和伪元素时对那些我们不能通过class.id等选择元素的补充 伪类的操作对象是文档树中已有的元素(可以给已有元素加了一个类替代),而伪元素则创建了一个文档数外的元素(可以添加一个新元素替代) CS ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
随机推荐
- Spring 下载与安装以及spring 3.2.9 jar包详解
一.Spring简介 Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包,但是完全没想到中国的国情,在 ...
- 提高IT团队工作效率的建议
过分强调个人主义,不科学分工,内部成员的冲突等,都将导致IT团队没有凝聚力,直接影响团队合作项目的完成.如何提高团队工作效率,相信很多IT经理人都想过这类问题.日前,国外科技网站CIO撰文就如何提高I ...
- JavaScript中的不可见数据类型
JS提供了一些内置对象.函数和构造器供我们编程,如Math.parseInt.Object.Array等.这些都是可见的,编程时可以使用的.比如我可以new Object 或 new Array. 有 ...
- [麦先生]在Laravel框架里实现邮箱验证---发送邮件
在经过一段时间的使用后,发现在项目中很多地方需要用到用户验证,以短信验证和邮箱验证为主流趋势,小麦总结了如果在Laravel框架中实现发送邮件功能,以后会陆续更上如何实现短信验证..... 在.env ...
- Linux 系统常用命令汇总（二） vi 文本编辑
文本编辑 vi 命令 作用 +文件名 编辑文本文件,若文件不存在同时创建该文件 Ctrl+f 向后翻一页 Ctrl+b 向前翻一页 Ctrl+d 向后翻半页 Ctrl+u 向前翻半页 + 光标移动到下 ...
- OpenStack overview 笔记
Example architecture example architecture 至少需要两个节点启动一个虚拟机或者实例.可选的服务,例如Block storage和Object storage需要 ...
- HDU 5029 Relief grain --树链剖分第一题
题意:给一棵树,每次给两个节点间的所有节点发放第k种东西,问最后每个节点拿到的最多的东西是哪种. 解法:解决树的路径上的修改查询问题一般用到的是树链剖分+线段树,以前不会写,后来学了一下树链剖分,感觉 ...
- POJ 1847 Tram --set实现最短路SPFA
题意很好懂,但是不好下手.这里可以把每个点编个号(1-25),看做一个点,然后能够到达即为其两个点的编号之间有边,形成一幅图,然后求最短路的问题.并且pre数组记录前驱节点,print_path()方 ...
- js confirm()方法的使用方法实例
今天学习了js 中confirm的使用方法,confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框. 如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按 ...
- Spring 一二事（1）
简单介绍一下spring,一方面带新手入入门,一方面自己也重温一下第一个小工厂先暂时不用maven,下一个会用maven来来配置 jar包只需要一个,spring版本为2.5(暂时为2.5,后续更新, ...