特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。
和前面一样,在开始之前先创建一个Dom:
<div class="demo clearfix"> <ul class="clearfix"> <li class="first links odd" id="first"><a href="">1</a></li> <li class="links even"><a href="">2</a></li> <li class="links odd"><a href="">3</a></li> <li class="links even"><a href="">4</a></li> <li class="links odd"><a href="">5</a></li> <li class="links even"><a href="">6</a></li> <li class="links odd"><a href="">7</a></li> <li class="links even"><a href="">8</a></li> <li class="links odd"><a href="">9</a></li> <li class="links even last" id="last"><a href="">10</a></li> </ul> </div>
同样先加上一些样式,让他看起来好看一点
.demo { width: 300px; border: 1px solid #ccc; padding: 10px; } .demo li { border: 1px solid #ccc; padding: 2px; float: left; margin-right:4px; } .demo a { float: left; display: block; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green; text-decoration: none; }
最出效果:
CSS的伪类语法和别的语法有点不一样,其主要有两种语法表达方式
E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/
示例:
a:link {color:red;}
第二种写法
E.class:pseudo-class{property:value}
如:
a.selected:hover {color: blue;}
下面开始我们一起来看看这些伪类的具体应用:
一、动态伪类
动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus"。先来看最常见的锚点伪类
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
对于这四个锚点伪类的设置,有一点需要特别注意,那就是他们的先后顺序,要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。如果你把顺序搞错了会给你带来意想不到的错误,大家对于这个应该很熟悉的,如果是初学的朋友,可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中,他们所表达的意思是:
- :hover用于当用户把鼠标移动到元素上面时的效果;
- :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
- :focus用于元素成为焦点,这个经常用在表单元素上。
本站的button就采用了这几处效果:
.form-submit { -moz-transition: border-color 0.218s ease 0s; -webkit-transition: border-color 0.218s ease 0s; -o-transition: border-color 0.218s ease 0s; -ms-transition: border-color 0.218s ease 0s; transition: border-color 0.218s ease 0s; background: none repeat scroll 0 0 #F5F5F5; border: 1px solid #DCDCDC; -moz-b
如需转载,烦请注明出处:https://www.w3cplus.com/css3/pseudo-class-selector
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!