CSS Selector 之 Pseudo-Classes & Pseudo-Elements

Pseudo-Class & Pseudo-Elements 这两个名词起的非常不友好，让人看了完全摸不着头脑。可想而知，到了国内，一定有土鳖将其翻译成“伪类”/“伪元素”。伪类。。。好吧，听上去还不如叫变态假面。

首先看一下 MDN 上的解释

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

我觉得

• pseudo class 叫 state selector
• pseudo elements 叫 sub-elements selector

更容易记忆

链接的 pseudo class

• a:link 未浏览过，未 hover 时的链接
• a:visited 浏览过的链接
• a:hover 鼠标 hover 的链接。当然 :hover 还可以应用与 p/div/span 标签。例如，使用 span 做了几个按钮，当鼠标移到到 span 上时，需要将鼠标样式缓存手型，span:hover {cursor: pointer;}
• a:active 点击瞬间的链接

段落的 pseudo elements

• :first-letter
• :first-line

CSS3 的新语法

CSS3 中为了区分 pseudo class 与 pseudo elements, 为 pseudo elements 增加了一个冒号。例如，::first-letter.

但是，同样这会带来兼容性的问题，IE8 及之前版本并不支持双冒号的写法。当然，我觉得 CSS3 这是多此一举。

在此记录一些常用的 pseudo class & pseudo elements. 要查看更多的，MDN 是个好去处，还有对于的浏览器兼容性说明。

:focus

pseudo class. 例如，点击了一个输入框，将焦点至于其中，或者 TAB 到了该元素上。

:before & :after

pseudo element. 就是在某个元素前/后加入指定内容，当然我并不觉得这个功能很实用，因为后台模板完全可以处理。除非是你没有修改模板的权限时，只能通过 css 的方式进行修改。

:first-child & :last-child & :nth-child

pseudo class (我不能理解，这为何不是 pseudo element?)。

• :nth-child(odd)
• :nth-child(even)
• :nth-child(2) 第二个子元素，注意，index 是从1开始，而不是0
• :nth-child(3n) 3的倍数
• :nth-child(3n+1)

注意，IE9 之后才支持 :nth-child, 所以想给 table tr 加上斑马线效果，最好还是使用 js add class 去实现。

参考

• Pseudo-classes from MDN
• Pseudo-elements from MDN
• CSS The Missing Manual 4th Edition

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式