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. <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;}
效果:
CSS伪类和伪元素 
其他<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;}
效果:
CSS伪类和伪元素,第一个<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;}
效果:
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.     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、伪元素在一个选择器中只能出现一次,并且只能出现在末尾。