CSS 有 4 类 Selector。

Type, class, and ID selectors

h1 { }
.box { }
#unique { }

Attribute selectors

a[title] { }
a[href="https://example.com"] { }

Pseudo-classes and pseudo-elements

Pseudo-class

Pseudo-class 是用来选择特定状态下的元素，如 a:hover 用来选择鼠标指过去的 <a> 元素。有这几类：

• Dynamic pseudo-classes，如 :hover、:visited
• UI element states pseudo-classes，如 :enabled、:disabled、:checked
• Structural pseudo-classes，如 :first-child、:nth-child(n)
• Other pseudo-classes，如 :not(x)、:target

Pseudo-element

Pseudo-element 可以 创建 新的元素（而无需在 HTML 中指定它），并且可以像正常元素那样操作它。最常见的例子是给链接前后加上小图标：

a.tc-tiddlylink-external::before {
    font-family: FontAwesome;
    padding-right: 2px;
    content: "\f14c";
    color: gray;
}

但是对于「创建」这个说法，我觉得不是很全面，比如 ::first-line 这种 pseudo-element 看起来像 pseudo-class。

参考：

• Pseudo-classes vs pseudo-elements - Growing with the Web

Combinators

将上面几类结合起来的 selector：

article > p { }

Resources

• CSS selectors - MDN