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:向拥有键盘输入焦 ...
随机推荐
- linux命令详解之挂载光驱的方法
linux的硬件设备在/dev目录下,光驱也是其中./dev/cdrom表示光驱,挂载光驱的方法如下(以root身份): 代码如下: mkdir /mnt/cdrommount -t auto - ...
- jenkins maven svn 部署web项目到本地Tomcat
查了N多网页,折腾了几个小时,终于部署成功,部署的过程比较坎坷,遇到各种问题,记录一下,不管大家是否会遇到的同样的问题,希望有所帮助: 常规操作: 1.下载jenkins,必须要做的一步,http:/ ...
- 设置html的div中背景图片长宽
使用以下可行 background-size:1040px 482px;
- MSDE简介
MSDE的全程是Microsoft SQL Server Desktop Engine,它是一个基于 SQL Server 核心技术构建的数据引擎.MSDE 2000 支持单处理器和双处理器,是面向小 ...
- MPP 架构数据库
Greenplum是一种基于postgresql的分布式数据库.其采用shared nothing架构(MPP),主机,操作系统,内存,存储都是自我控制的,不存在共享.也就是每个节点都是一个单独的数据 ...
- 分享一个Fluent风格的邮件发送封装类
C#中用SmtpClient发邮件很简单,闲着无事,简单封装一下 IEmailFactory public interface IEmailFactory { IEmailFactory SetHos ...
- T-SQL 语句创建Database的SQL mirroring关系
1 证书部分:principle 和 secondary 端执行同样操作,更改相应name即可 USE master; --1.1 Create the database Master Key, if ...
- 用运算符代替if、else
- windows客户机连接gerrit的一个报错处理
gerrit环境部署在linux服务器,windos客户机连接gerrit进行代码操作: 在windows客户机下载Git客户端 在“Git Bash”里使用 ”ssh-keygen -t rsa - ...
- ST3插件——PlainTasks的使用
今天看到一个有意思的ST3插件,可以进行简单的任务管理. 安装很简单:ctrl + shift + p,输入install回车,再输入plaintasks回车即可. 以下是一些支持的操作,更多的操作请 ...