简单伪类

(1):active 被激活的元素(例如激活的链接)。

(2):first-child 元素的第一个子元素。

(3):focus 有焦点的元素(例如接收输入的表单字段)。

(4):hover 指向的元素(例如通过鼠标)。

(5):lang() 特定语言的样式。

(6):link 未跟踪的链接。

(7):visited 以前访问过的链接。

注意:

(1) 将伪类和其他的类和伪类放在一起使用时,中间不要留空格,只有.和:指示符。 eg a.offsite:link{color:green;}

(2) link伪类和visited伪类经常一起使用,用link伪类设置链接未访问时的样式,用visited设置链接访问后的样式。

(3) :first-child伪类用于选择元素,选择的元素是另一个元素的第一个子代。如果第一个子代匹配选择符的基本类型。(:first-child 伪类前面的部分),那么将规则应用于该元素。

时间: 2024-08-10 07:58:54

简单伪类的相关文章

CSS-用伪类制作小箭头(轮播图的左右切换btn)

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

CSS3伪类实现动画旋转效果

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

关于css伪类的一些兼容性测试

测试环境:xp ,ie7~8  chrome. link 伪类 :(:link,:visited)  这个是链接专用 动态伪类 :(:hover,:active,:focus) <!DOCTYPE html> <html> <head></head> <style type="text/css"> a:link,input:hover{color:blue;} a:visited{color:green;} a:active{

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

认识:before和:after伪类

有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如: <div class="aa">你好</div><div class="aa">我好</div><div class="aa">大家好</div><div class="aa">前面和后面</div> 我们如果需要为每一个div添加一个动态

第十二节课,css伪类 (转)

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att

CSS2中的伪类与伪元素

CSS 伪类用于向某些选择器添加特殊的效果. 我们最常见的就是有超链接的时候,向下面这样 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 首先来看一下伪类的定义形式吧 伪类的语法: selector : pseudo-class {pro

css3中关于伪类的使用

目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时,经常会遇到在每一个li后面添加一个分割符号,到最后一个元素的时候,分割符就会去掉的一种效果. 如图 那么制作这样的一个效果,怎么用纯css很简单的完成了.这里用到了css的伪类. html部分 <body> <ul class="nav"> <li><a href="">Home</a></