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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式