CSS伪类和伪元素

时间：2022-07-03 21:17:23

一、伪类

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. 

  2. 		<p>
    3. 

  3. 			哈哈哈
    4. 

  4. 		</p>
    5. 

  5. 		<p>
    6. 

  6. 			<i>AAA</i>
    7. 

  7. 			<i>bbb</i>
    8. 

  8. 		</p>
    9. 

  9. 		<p>
    10. 

  10. 			<i>CC</i>
    11. 

  11. 			<i>DD</i>
    12. 

  12. 		</p>
    13. 

  13. 		<p lang="en">呵呵</p>
    14. 

  14. 	</body>
    15.

css:

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

失败的例子：
html:
    

  1. 	<body>
    2. 

  2.         <span></span>
    3. 

  3. 		<p>
    4. 

  4. 			哈哈哈
    5. 

  5. 		</p>
    6. 

  6. 		<p>
    7. 

  7. 			<i>AAA</i>
    8. 

  8. 			<i>bbb</i>
    9. 

  9. 		</p>
    10. 

  10. 		<p>
    11. 

  11. 			<i>CC</i>
    12. 

  12. 			<i>DD</i>
    13. 

  13. 		</p>
    14. 

  14. 		<p lang="en">呵呵</p>
    15. 

  15. 	</body>
    16.

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


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

  1.     <body>
    2. 

  2. 		<p>
    3. 

  3. 			<span>哈哈哈哈哈</span>
    4. 

  4. 			<i>呵呵</i>
    5. 

  5. 			哈哈哈
    6. 

  6. 			<i>呵呵</i>
    7. 

  7. 		</p>
    8. 

  8. 		<p>
    9. 

  9. 			<i>AAA</i>
    10. 

  10. 			<i>bbb</i>
    11. 

  11. 		</p>
    12. 

  12. 		<p>
    13. 

  13. 			<i>CC</i>
    14. 

  14. 			<i>DD</i>
    15. 

  15. 		</p>
    16. 

  16. 		<p lang="en">呵呵</p>
    17. 

  17. 	</body>
    18.
css:
  1. p>i:first-child{color: green;}
效果：
CSS伪类和伪元素，第一个<p>标签内，由于<i>不是第一个子元素，所以不会被选择器选中，颜色不会变成绿色。
 

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

  1. <body>
    2. 

  2. 		<p>
    3. 

  3. 			<span>哈哈哈哈哈</span>
    4. 

  4. 			<i>呵呵</i>
    5. 

  5. 			哈哈哈
    6. 

  6. 			<i>呵呵</i>
    7. 

  7. 		</p>
    8. 

  8. 		
    9. 

  9. 		<p>
    10. 

  10. 			<i>AAA</i>
    11. 

  11. 			<i>bbb</i>
    12. 

  12. 		</p>
    13. 

  13. 		<p>
    14. 

  14. 			<i>CC</i>
    15. 

  15. 			<i>DD</i>
    16. 

  16. 		</p>
    17. 

  17. 		<p lang="en">呵呵</p>
    18. 

  18. 	</body>
    19.
css:
  1. p:first-child i{color: red;}
效果：
CSS伪类和伪元素  其他<p>标签不会被选中，颜色不会变成红色。
对于lang伪类，看下面的例子：
css
  1. p:lang(en){color: red;}
html:
  1. <p lang="en">呵呵</p>
效果：
CSS伪类和伪元素 

二、伪元素

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

提示：
1、CSS3中规定伪元素的写法是要用两个冒号的，比如，::first-line，但是由于一些IE浏览器不支持，所以现在变得既可以用两个冒号，也可以用用一个冒号。
2、另外，:after和:before会在元素中添加内容，具体的方式类似于：
    

  1. p:after{
    2. 

  2.     content:"内容";
    3. 

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

  1. p:first-line{
    2. 

  2.  color:red;
    3. 

  3. }
    4. 

  4. p:first-letter{
    5. 

  5.  color:yellow;
    6. 

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

三、伪类和伪元素的区别

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

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

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



相关文章