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:向拥有键盘输入焦 ...
随机推荐
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS盒模型重新理解篇
最近比较闲,思索着怎么提高下JS技术,于是找到了昵称为豪情的这哥们的一篇文章,应该是哥们吧,详细了解了下,发现其中的试题CSS部分有些做起来很吃力,于是乎各种google恶补盒模型,找到了这哥们的一文 ...
- web.xml文件报错:The processing instruction target matching "[xX][mM][lL]" is not allowed.
昨晚把我的项目上传到了gitlab,然后今天在公司从gitlab下载下来, 发现web.xml报错.
- [部署]CentOS yum源
安装yum源 一般的软件都会提供一个.rpm的软件包,使用rpm指令安装了这个包后会自动添加一个yum仓库源,之后用yum就可以安装该软件了. 安装rpm包 rpm -ivh http://repo. ...
- 【C#】2.算法温故而知新 - 冒泡排序
冒泡排序可以很好的解决前面提到的简单桶排序的2个问题,冒泡排序的基本思想是:每次比较两个相邻的元素,如果它们的顺序错误就把它们交换过来. 该算法的核心部分是双重嵌套循环,其时间复杂度是O(N²). 缺 ...
- JAVASE笔记回顾
第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ, ...
- Zookeeper C API 指南一(转)
Zookeeper 监视(Watches) 简介 Zookeeper C API 的声明和描述在 include/zookeeper.h 中可以找到,另外大部分的 Zookeeper C API 常量 ...
- 九度OJ，题目1089：数字反转
题目描述: 12翻一下是21,34翻一下是43,12+34是46,46翻一下是64,现在又任意两个正整数,问他们两个数反转的和是否等于两个数的和的反转. 输入: 第一行一个正整数表示测试数据的个数n. ...
- 谈谈自己对java的学习看法
从明天起,开始整理java的基础知识,进行巩固学习. 今天呢,谈谈自己的一点想法.很多人不知道java怎么学,学什么,有的是直接在网上找一些视频来看,不懂的地方到处跑群里问,结果效果并不是太好,怎么办 ...
- mysql高可用方案总结性说明
MySQL的各种高可用方案,大多是基于以下几种基础来部署的(也可参考:Mysql优化系列(0)--总结性梳理 该文后面有提到)1)基于主从复制:2)基于Galera协议(PXC):3)基于NDB引 ...