css3 伪类

CSS3伪类nth-child结合transiton动画实现文字若影若现

css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I,,J先看下效果图: 看HTML5代码: <div class="box"> <span>A</span> <span>B</span> <span>C</span> <span>D</s…

CSS3伪类和伪元素

作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最多算得上近房亲戚. 下面我们来开始讲讲单冒号(:)伪类和双冒号(::)伪元素有什么相同和不同点(另外在CSS2中单冒号“:” 也叫做伪对象,具体可看看http://www.mb5u.com/tool/css2/) 单冒号(:)早在CSS中已经存在了,相信用惯CSS的码农肯定对:hover伪类并不…

Selectivizr-让IE6~8支持CSS3伪类和属性选择器

一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性测试demo 二.简介 selectivizr是一个JavaScript工具,使IE浏览器也可以支持CSS3伪类以及属性选择器,使用很简单,只要把js include到页面上,然后你就可以(- o -)~zZ补觉了. 优点在于: 1. 让老的IE浏览器支持19个CSS3伪类,2个伪元素,以及所有的属…

利用CSS3伪类做3D按钮

这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a_demo_three">点我!</a></p> <p><a class="a_demo_three second_button">来嘛,别害怕!</a></p> <p><a clas…

CSS3 伪类选择器 nth-child() 的用法

伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等,不过,目前nth-of-type(n)只支持火狐3.opera.safari和chrome等部分浏览器. :nth-child()选择某个元素的一个或多个特定的子元素:你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字 length为整数*/ :nth-child…

jQuery实现隔行变色、悬停变色（ CSS3伪类选择器：nth-child() ）

<title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/javascript"></script> <style type="text/css"> body { font-size: 12px; text-align: center; } #tbStu { width: 160px; height: 50…

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){…

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史伪元素实际上在CSS1(CSS1发布于 199…

css3 -- 伪类与伪元素

伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){} E : first-*(odd){} B:nth-child 是根据其父元素中国子元素的总数进行计算 nth-of-type 是根据特定类型的子元素进行计数 nth-last-child 与nth-child类似,不过是从最后开始计算 nth-last-of-type 与nth-of-type 类似,不过是从最后开始计算 C:first-of-type .last…

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before.:after称为伪类.CSS3对这两个概念做了相对较清晰地概念,并且在语法上也很明显的讲二者区别开. 伪类 - pseudo classes 首先看看CSS2中对伪类的…

CSS3伪类实现动画旋转效果

一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方.利用了伪类实现css3动画效果,初学者可以看一下,恩.<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="D…

IE下CSS3伪类的支持

当css3.0出现以后,着实让我兴奋了好久,因为出现了很多选择器,我们在也不用靠js做复杂判断了.比如:nth-child,很容易就可以判断奇偶对象 “:nth-child(2n)和:nth-child(2n+1)” 但是IE对css3的严重不支持,实在让我头疼.虽然现在IE9的发布,但是国人还有很多在使用IE6 7 8. 无意间发现了一个js库,虽然不知道原理是什么,但是尝试了一下,发现完全支持IE下的伪类.嘿嘿,拿过来用就好了. 提供下载地址:http://selectivizr.com/…

CSS3伪类和伪元素的特性和区别尤其是 ::after和::before

伪类和伪元素的理解官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类. 伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中. 我自己的理解: 伪类,类,class是一个类,就类似class这样,表示一些元素的状态的,但是无须标识的分类. 伪元素,就是一个元素,类似p标签元素,等等,逻辑上存在,但是实际并不存在在文档树中.…

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别都是对某些选择器“加特技” 标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化这话更抽象,其实意思就是对那些我们不能通过class.id等选…

CSS3伪类 :empty

:empty 种类:伪类选择器版本:CSS3.0 用法:匹配每个没有子元素(包含文本)的元素. 例子: <!DOCTYPE html> <html> <head> <title>test008_伪类选择器empty</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: white; } div:emp…

cSS3 伪类:nth-child 的使用方法

:nth-child是一个非常牛逼的伪类,如果你能很好的理解它就可以用CSS 做出很多非常实用的效果.当我很年轻的时候还使用PHP的i++来实现一些东西,其实CSS 完全可以实现.下面是我总结的一些用法,用了可爱的糖糖做演示,彩色头像就代表选中,T,T. 仅选择第5个 li:nth-child(5) { ... } 如果选择第一个元素的话你可以使用:first-child或者用上面的方法. 除了前五个全部选择 li:nth-child(n+6) { ... } 只选择前5个 li:nth-chi…

用CSS3伪类实现书签效果

前两天想给博客上添个书签效果,类似于下面这样: 在网上搜索一番后,发现一篇纯css书签导航按钮用三个div实现了这个效果.但是博客园可没有给我这么多div,所以试着用伪类实现了一下. before,after伪类这两个属性就像正常元素的小左和小右.他们没有元素标签,但是却有元素的css属性,除此之外,他们还有一个特殊的属性叫'content',用来放置文本内容.他们虽然叫before和after,但是跟元素却不是兄弟关系,而是被浏览器当成元素的子元素进行布局.有下图为证. 所以在一个空的div…

CSS3伪类使用方法实例

有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .box{ width…

css3伪类和伪元素你都懂了吗

什么是伪类? 伪类用于定义元素的特殊状态. 例如,它可用于: 当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为指定元素后代的所有元素.以下示例选择<div>元素内的所有<p>元素: 选择器:伪类 { 属性:值; } 链接可以以不同方式显示: /* 未访问的链接 */ a:link { color: red; } /* 已浏览过的链接 */ a:visited { color: green; } /* 鼠标…

CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）

nth-child(odd):奇数 nth-child(even):偶数使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算. 比如: <li></li> <li class="test"></li> <li></li> 如果我要选择class为test的,nth-child(2),第2个. 详细解释,参考: http://niutuku.com/tech/css/249737.…

css3 伪类实现右箭头→

css3 实现右箭头→ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .divtest{ position: absolute; top: 100px; left: 100px; height: 3px; widt…

css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

p:nth-child(2) 要满足两个条件,1:选择的是p元素的父元素的第二个子元素 2:选择的第二个子元素必须是p元素,如果不满足,则将不显示 p:nth-of-type(2) 选择父元素下的第二个p元素…

css3伪类温故知新

今天遇到一个问题.要求::after 和 ::before的 content:"content" 能够动态的进行变换,能被JavaScript操作. 百度了下,自己做了实验,发现有几种方法可以进行动态赋值. 1,最基本,::after的content的内容可以绑定父元素的attribute值,如content:attr(myprattr),这个myprattr就是父元素的属性值: 2,通过js进行操作,既然::after通过与父元素的attribute值进行绑定,那么就可以通过java…

CSS3 伪类选择器 :nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0开始计算*/ :nth-child(n*length)/*n的倍数选择,n从0开始算*/ :nth-child(n+length);/*选择大于length后面的元素*/ :nth-child(-n+length)/*选择小于length前面的元素*/ :nth-child(n*length+1);…

【css3 伪类】的更多相关文章