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:向拥有键盘输入焦 ...
随机推荐
- html页面通过特殊链接：打电话，发短信，发邮件详细教程
采用url href链接的方式,实现在Safari ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1. 拨打电话 在电话号码 ...
- MAVEN整理（乘国庆还有时间，停下来整理一下）
昨天写下了这篇博客(http://www.cnblogs.com/hzmark/p/131003Release.html),今天有时间,就这里一下第一篇内容. 换工作公司开发平台: WINDOWS+V ...
- ASP.NET发布网站遇到的几个问题
环境背景 操作系统:Win7 开发工具:Visual Studio 2013 Framework: Framework 4.0 Issue1: 无法识别的属性“targetFramework” 解决方 ...
- visual studio 2013 快捷键大全
1.回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合键“Ctrl + -”: 2)前进到下一个光标位置:“Ctrl + Shift + - ”. 2.复制/剪切/删除整行代码 ...
- Oracle Jdbc demo
两种方式: thin是一种瘦客户端的连接方式,即采用这种连接方式不需要安装oracle客户端,只要求classpath中包含jdbc驱动的jar包就行.thin就是纯粹用Java写的ORACLE数据库 ...
- UESTC 918 WHITE ALBUM --生成树变形
最小生成树变形. 题目已经说得很清楚,要求到达每个房间,只需求一个最小生成树,这时边权和一定是最小的,并且那k个房间一定与所有点都有通路,即一定都可以逃脱. 但是有可能当所有点都有了该去的安全房间以后 ...
- UVALive 6449 IQ Test --高斯消元？
题意:给你一串数字,问这串数字符合f[n] = a*f[n-1],f[n] = a*f[n-1]+b*f[n-2],f[n] = a*f[n-1]+b*f[n-2]+c*f[n-3]这几个方程中的哪个 ...
- 怪物彈珠Monster Strike 攻略
火>水>木>光>暗 1.每天的曜日素材本,周一暗光,周二火,周参水,周四木,周五光乌龟,都是可以打整天的 2.另外补充,升经验用暗乌龟,切忌切记要塞给他随便一只烂宠升等,再吃掉 ...
- Daikon Forge GUI 制作图集和字体集
Daikon Forge GUI 制作UI面板 在上次的学习中制作了一个简单的面板,下面来学习制作图集以及字体. 1.DF-GUI 图集(Atlas)制作 操作步骤 选中UI Root根节点,在Sce ...
- Linux环境安装Jenkins
安装环境: CenOS 6.4 JDK_1.6.0_23 一.安装前检查环境 检查是否安装JDK: java --version 二.安装Jenkins 1. 添加Jenkins的源(reposito ...