详解 CSS 伪元素与伪类的区别


浏览器支持

个别伪类伪元素只支持 ie8+,具体看后文
IE8+ 及 Chrome、Firefox、Opera、Safari 等主流浏览器支持

定义的区别

CSS 伪类 – 用于向某些选择器添加特殊的效果。
CSS 伪元素 – 用于将特殊的效果添加到某些选择器。

伪类成员

  • :link – CSS1 – 向未被访问的链接添加样式 – 所有浏览器都支持
  • :visited – CSS1 – 向已被访问的链接添加样式 – 所有浏览器都支持
  • :hover – CSS1 – 当鼠标悬浮在元素上方时,向元素添加样式 – 所有浏览器都支持
  • :active – CSS1 – 向被激活的元素添加样式 – 所有浏览器都支持
  • :focus – CSS2 – 向拥有键盘输入焦点的元素添加样式 – ie8+/其他浏览器都支持
  • :first-child – CSS2 – 向元素的第一个子元素添加样式 – 所有浏览器都支持(必须声明 <!DOCTYPE>)
  • :lang – CSS2 – 向带有指定 lang 属性的元素添加样式 – ie8+/其他浏览器都支持

伪元素成员

  • :first-letter – CSS1 – 向文本的第一个字母添加特殊样式 – 所有浏览器都支持
  • :first-line – CSS1 – 向文本的首行添加特殊样式 – 所有浏览器都支持
  • :before – CSS2 – 在元素之前添加内容 – 所有浏览器都支持
  • :after – CCSS2 – 在元素之后添加内容 – 所有浏览器都支持

用法的区别 – 原理

先看下伪元素 :first-letter 的用法:


div:first-letter {
	color: red;
}


<div>hello, daodesign.net</div>

如果在不用伪元素:first-letter的情况下,要这样才能达到效果:


span {
	color: red;
}


<div><span>h</span>ello, daodesign.net</div>

必须用一个元素包裹首字母才能实现同样的效果。(当然,这里不考虑 js,只看 css)
再看下伪类:first-child的用法:


div > span:first-child {
	color: red;
}


<div>
	<span>hello</span>
	<span>daodesign.net</span>
</div>

如果在不用伪元素:first-child的情况下,要这样才能达到效果:


.colorred {
	color: red;
}


<div>
	<span class="colorred">hello</span>
	<span>daodesign.net</span>
</div>

必须给第一个子元素添加一个类,在类里定义样式才能实现同样的效果。

伪元素的效果可以通过添加一个元素达到,伪类的效果可以通过添加一个类来达到。

CSS3 的改变

在 css3 中为了区分两者,已经明确规定了伪类用一个冒号来表示,伪元素用两个冒号来表示。

:pseudo-classes //伪类
::pseudo-elements //伪元素

但因为浏览器兼容性的问题,现在大部分还是统一的单冒号。


<< CSS3 属性 opacity:透明度 CSS2 伪元素 :after/:before >>
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录