关於伪类 ( pseudo-class )

伪类选取器 ( pseudo-class ) 或是也被称为拟态选择器，可以用来设定 HTML 元素在特定状态的样式，最常使用的就是:hover，可以设定滑鼠游标移至元素上时的样式，制作选单或按钮时很常使用

伪类选取器相较於伪元素多了许多，这边列出几个看过的，其他可参考 Pseudo-classes - CSS: Cascading Style Sheets | MDN
以下为 MDN 列出的部分伪类选取器

		
		:active
		:checked
		:default
		:defined
		:disabled
		:empty
		:enabled
		:first
		:first-child
		:first-of-type
		:focus
		:focus-within
		:hover
		:indeterminate
		:invalid
		:lang()
		:last-child
		:last-of-type
		:link
		:not()
		:nth-child()
		:nth-last-child()
		:nth-last-col() 
		:nth-last-of-type()
		:nth-of-type()
		:only-child
		:only-of-type
		:placeholder-shown 
		:read-only
		:root
		:target
		:valid
		:visited
        ...

根据 W3.org ，Selectors Level 3可将众多的伪类选取器分成六类：

Dynamic pseudo-classes （动态伪类）
The target pseudo-class （目标伪类）
The language pseudo-class (语言伪类）
The UI element states pseudo-classes（ UI 元素特定状态的伪类 ）
Structural pseudo-classes （结构化伪类）
The negation pseudo-class （否定伪类）

关於这些伪类的详细的介绍可以参考
重新认识 CSS - Pseudo-class (伪类) (1) | Titangene Blog
重新认识 CSS - Pseudo-class (伪类) (2) | Titangene Blog

有几个自己纪录的一些注意的点：

虽然有区分伪类是单个冒号、伪元素是双个冒号的写法，但是因 W3C 规范在早期没有这样的区别，因此伪元素写成一个冒号，也会被浏览器接受
自己是不常注意到底是几个冒号，某天发现自己写的和其他人不一样，才在伪元素的文章中看到说明
因伪类选取器 ( pseudo-class ) 本身就是一个 class，因此权重和 class 相同
其中的 :link，主要是设定 a 连结未被点击时的样式，但因也可以直接在 a 连结上直接设定样式，因此较少使用到，需注意 :link 是设定有 href 属性的元素上才有效果，像是 <a> <area> <link>，因此若使用在 <button> 是无效的
::placeholder 在某些情况也是伪类
参考 ::placeholder | CSS-Tricks
在 hover 以外自己有机会使用到的是结构化的伪类，像是:nth-child(n)，初学时常常会有选取不到的情形，因是要从几个都是相同的元素选取特定的某个元素，例如想要选择偶数的 li，并想将 li 里面的 h2 设定不同样式，常会在顺序上没搞清楚，写成 li h2:nth-child(2n)，结果设定的样式没有显示，因爲 li 中的 h2 只有一个，而不是有很多个相同的 h2 ，因此虽然想要设定的是 li 里面的 h2，但是要从多个相同的 li 选取特定，因此应该是 li:nth-child(2n) h2 {...}