一、伪类

CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个:

CSS2.1
:active:向被激活的元素添加样式(激活是指点击鼠标那一下)
:focus:向拥有键盘输入焦点的元素增加样式    
:hover:当鼠标悬浮在元素上方时,向元素增加样式
:link:向未被访问的链接增加样式
:visited:向已被访问的链接增加样式
:first-child:向元素的第一个子元素增加样式
:lang:向带有指定lang属性的元素增加样式

CSS3中的伪类(注意CSS3级别的伪类可能缺乏浏览器支持,可能要准备相应的JS支持):
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

提示:
1、伪类名称对大小写不敏感。比如:ACTIVE,Active,active都是合法的。
2、l v h a原则。按照 link 、visited、hover、active 的顺序来写。
3、在IE中必须声明<!DOCTYPE>,first-child伪类才会生效
4、伪类后面还可接选择器


 疑问:

对于first-child伪类,看下面的解释:

1、p:first-child 匹配第一个<p>元素选择器匹配作为任何元素的第一个子元素的 p 元素,如果<p>元素不是第一个,则无效。
成功的例子:
html:
  1. <body>
  2. <p>
  3. 哈哈哈
  4. </p>
  5. <p>
  6. <i>AAA</i>
  7. <i>bbb</i>
  8. </p>
  9. <p>
  10. <i>CC</i>
  11. <i>DD</i>
  12. </p>
  13. <p lang="en">呵呵</p>
  14. </body>

css:

  1.   p:first-child{color: yellow;}
效果:
 
其他<p>标签内的元素不改变颜色。

失败的例子:
html:
  1. <body>
  2.         <span></span>
  3. <p>
  4. 哈哈哈
  5. </p>
  6. <p>
  7. <i>AAA</i>
  8. <i>bbb</i>
  9. </p>
  10. <p>
  11. <i>CC</i>
  12. <i>DD</i>
  13. </p>
  14. <p lang="en">呵呵</p>
  15. </body>

css:
  1.     p:first-child{color: yellow;}
效果:
没有一个<p>标签内的颜色改变为黄色,因为没有一个<p>标签是作为它的父元素的第一个元素。



2、p>i:first-child 匹配所有<p>元素的第一个<i>元素 选择器匹配所有 <p> 元素中的第一个 <i> 元素,如果<i>元素不是第一个则无效。
成功的例子:
html:
  1.     <body>
  2. <p>
  3. <span>哈哈哈哈哈</span>
  4. <i>呵呵</i>
  5. 哈哈哈
  6. <i>呵呵</i>
  7. </p>
  8. <p>
  9. <i>AAA</i>
  10. <i>bbb</i>
  11. </p>
  12. <p>
  13. <i>CC</i>
  14. <i>DD</i>
  15. </p>
  16. <p lang="en">呵呵</p>
  17. </body>
css:
  1. p>i:first-child{color: green;}
效果:
,第一个<p>标签内,由于<i>不是第一个子元素,所以不会被选择器选中,颜色不会变成绿色。

 

3、p:first-child i 匹配所有作为第一个子元素<p>中的所有<i>元素 选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
成功的例子:
html:
  1. <body>
  2. <p>
  3. <span>哈哈哈哈哈</span>
  4. <i>呵呵</i>
  5. 哈哈哈
  6. <i>呵呵</i>
  7. </p>
  8. <p>
  9. <i>AAA</i>
  10. <i>bbb</i>
  11. </p>
  12. <p>
  13. <i>CC</i>
  14. <i>DD</i>
  15. </p>
  16. <p lang="en">呵呵</p>
  17. </body>
css:
  1. p:first-child i{color: red;}
效果:
  其他<p>标签不会被选中,颜色不会变成红色。

对于lang伪类,看下面的例子:
css
  1. p:lang(en){color: red;}
html:
  1. <p lang="en">呵呵</p>
效果:
 

二、伪元素

W3C规范中有4个伪元素:
CSS-1
:first-line 向文本的第一行添加样式
:first-letter 向文本的第一个字母添加特殊样式
CSS-2:
:after 在元素之后添加内容
:before 在元素之前添加内容

提示:
1、CSS3中规定伪元素的写法是要用两个冒号的,比如,::first-line,但是由于一些IE浏览器不支持,所以现在变得既可以用两个冒号,也可以用用一个冒号。
2、另外,:after和:before会在元素中添加内容,具体的方式类似于:
  1. p:after{
  2.     content:"内容";
  3. }
3、同一个标签可以使用多重伪元素,比如:
  1. p:first-line{
  2.  color:red;
  3. }
  4. p:first-letter{
  5.  color:yellow;
  6. }
其中,如果同时出现first-line,first-letter,并且相互有冲突的属性,那么会按照first-letter里面的属性来设置冲突的那些属性,而不是看其出现的先后顺序。例如上例中,第一行的第一个字母(中文是第一个字)的颜色应该为黄色。


三、伪类和伪元素的区别

1、伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。 

2、伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

3、伪元素在一个选择器中只能出现一次,并且只能出现在末尾。



随机推荐

  1. ASP.NET服务器端执行耗时操作的工作记录

    公司之前有这样一个业务需求: 一名同事做出文件a0和b0,然后将a0加密为a1.b0加密为b1:再将文件a0.a1.b0和b1上传至服务器M:同时要将服务器N上的数据表添加一条记录,该记录的ID就是前 ...

  2. 模拟namenode崩溃,使用secondarynamenode恢复

    方法一.使用namespaceID 1.在namenode节点上,将dfs.name.dir指定的目录中(这里是name目录)的内容情况,以此来模拟故障发生. [hadoop@node1 name]$ ...

  3. c#之xml

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  4. 【学习总结】UIGestureRecognizer(手势识别器)

    基本知识点 : -> IOS 3.2之后 , 苹果推出了手势识别功能 ( Gesture Recognizer ) 在触摸事件处理方面 , 简化开发难度. -> UIGesture Rec ...

  5. Scala学习笔记--枚举

    枚举 scala不用关注枚举的特别语法,取而代之的是标准库中的类, scala.Enumeration 想要创建新的枚举,只需要拓展这个类的对象即可 object Color extends Enum ...

  6. tomcat7或8如何修改浏览器标题上的ICON小图标

    替换tomcat根目录/webapps/ROOT下的favicon.ico文件,之后重启了服务器,可是还是显示那只猫的图标. 如果不能显示,请清除浏览器的缓存

  7. 使用C#系统服务定时执行操作

    1.新建项目 --> Windows 服务 2.Service1.cs代码 using System; using System.Collections.Generic; using Syste ...

  8. WPF 自定义滚动条(ScrollView、ScrollBar)样式

    一.滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的.修改的内容包含滚动条的颜色,上下按钮的隐藏.另外添加了鼠标经过滚动条动画. style样式如下: &l ...

  9. hadoop集群的规划和搭建

    1.操作系统版本:CentOS 6 CM版本:CM5.x CDH版本:CDH5.x 2.安装操作系统,对系统盘做 RAID1: 配置静态IP.hostname信息:vim /etc/sysconfig ...

  10. listview的pushBackDefaultItem中的item属性被修改问题

    time:2015/05/04 1. 描述 在cocostudio中有两个控件,一个listview,另外一个是隐藏的imageview,其中后者作为listview的元素.每次使用的时候把Image ...