CSS: Selector

20th August 2020 at 2:19pm
CSS

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。

参考:

Combinators

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

article > p { }

Resources