CSS伪类和伪元素

一、伪类

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:

<body>
		<p>
			哈哈哈
		</p>
		<p>
			<i>AAA</i>
			<i>bbb</i>
		</p>
		<p>
			<i>CC</i>
			<i>DD</i>
		</p>
		<p lang="en">呵呵</p>
	</body>

css:

  p:first-child{color: yellow;}

效果：

 

其他<p>标签内的元素不改变颜色。

失败的例子：

html:

	<body>
        <span></span>
		<p>
			哈哈哈
		</p>
		<p>
			<i>AAA</i>
			<i>bbb</i>
		</p>
		<p>
			<i>CC</i>
			<i>DD</i>
		</p>
		<p lang="en">呵呵</p>
	</body>

css:

    p:first-child{color: yellow;}

效果：

没有一个<p>标签内的颜色改变为黄色，因为没有一个<p>标签是作为它的父元素的第一个元素。

---

2、p>i:first-child 匹配所有<p>元素的第一个<i>元素 选择器匹配所有 <p> 元素中的第一个 <i> 元素，如果<i>元素不是第一个则无效。

成功的例子：

html:

    <body>
		<p>
			<span>哈哈哈哈哈</span>
			<i>呵呵</i>
			哈哈哈
			<i>呵呵</i>
		</p>
		<p>
			<i>AAA</i>
			<i>bbb</i>
		</p>
		<p>
			<i>CC</i>
			<i>DD</i>
		</p>
		<p lang="en">呵呵</p>
	</body>

css:

p>i:first-child{color: green;}

效果：

，第一个<p>标签内，由于<i>不是第一个子元素，所以不会被选择器选中，颜色不会变成绿色。

---

 

3、p:first-child i 匹配所有作为第一个子元素<p>中的所有<i>元素 选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素

成功的例子：

html：

<body>
		<p>
			<span>哈哈哈哈哈</span>
			<i>呵呵</i>
			哈哈哈
			<i>呵呵</i>
		</p>
		
		<p>
			<i>AAA</i>
			<i>bbb</i>
		</p>
		<p>
			<i>CC</i>
			<i>DD</i>
		</p>
		<p lang="en">呵呵</p>
	</body>

css:

p:first-child i{color: red;}

效果：

  其他<p>标签不会被选中，颜色不会变成红色。

---

对于lang伪类，看下面的例子：

css

p:lang(en){color: red;}

html:

<p lang="en">呵呵</p>

效果：

 

---

二、伪元素

W3C规范中有4个伪元素：

CSS-1

:first-line 向文本的第一行添加样式

:first-letter 向文本的第一个字母添加特殊样式

CSS-2:

:after 在元素之后添加内容

:before 在元素之前添加内容

提示：

1、CSS3中规定伪元素的写法是要用两个冒号的，比如，::first-line，但是由于一些IE浏览器不支持，所以现在变得既可以用两个冒号，也可以用用一个冒号。

2、另外，:after和:before会在元素中添加内容，具体的方式类似于：

p:after{
    content:"内容";
}

3、同一个标签可以使用多重伪元素，比如：

p:first-line{
 color:red;
}
p:first-letter{
 color:yellow;
}

其中，如果同时出现first-line，first-letter，并且相互有冲突的属性，那么会按照first-letter里面的属性来设置冲突的那些属性，而不是看其出现的先后顺序。例如上例中，第一行的第一个字母（中文是第一个字）的颜色应该为黄色。

---

三、伪类和伪元素的区别

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

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

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

来自为知笔记(Wiz)