选择器

​​一条 CSS 语法构成：

选择器 {
  /* 一个键值对称为一个规则 */
  属性: 值;
  /* ... */
}

简单的选择器

​通用选择器

* {
  color: hotpink;
}

类型选择器

<section>plain text</section>

section {
  padding: 2em;
}

类选择器

<div class="my-class"></div>

.my-class {
  color: red;
}

ID 选择器

<div id="rad"></div>

#rad {
  border: 1px solid blue;
}

属性选择器

<div data-type="primary"></div>

[data-type='primary'] {
  color: red;
}

可以不指定属性值：

[data-type] {
  color: red;
}

加个 s 表示大小写敏感：

[data-type='primary' s] {
  color: red;
}

包含 example.com ：

[href*='example.com'] {
  color: red;
}

以 https 开头：

[href^='https'] {
  color: green;
}

以 .com 结尾：

[href$='.com'] {
  color: blue;
}

分组选择器

strong, em, .my-class, [lang] {
  color: red;
}

伪类 Pseudo-classes

与元素或者其子元素交互会使元素处于不同的状态。

比如鼠标在元素上的悬停，用 :hover 伪类：

a:hover {
  outline: 1px dotted green;
}

选择奇数子元素：

p:nth-child(even) {
  background: floralwhite;
}

伪元素 Pseudo-element

伪元素语法用 :: ，行为有点类似于插入一个新元素：

.my-element::before {
  content: 'Prefix - ';
}

• ::before 在元素前插入内容

• ::after 在元素后插入内容

伪元素也可以操作元素的构成部分，比如：

• li::marker 用来设置列表项圆点的样式

• ::selection 用来设置选中内容的样式

组合器 Combinators​

• （空格） 选择元素的后代

  比如选择 p 的 strong 后代元素：

  p strong {
    color: blue;
  }

• + 选择元素的下一个直接兄弟

  比如给 .top 下元素间添加间隙：

  .top * + * {
    margin-top: 1.5em;
  }

• ~ 选择元素下面的所有兄弟

• > 选择元素的直接子元素

可以组合使用选择器。比如选择既是 <a> 元素，又是 .my-class 类的元素：

a.my-class {
  color: red;
}

可以在 Selectors Explained 辅助你解释选择器选择了什么。

---

参考

Selectors，Learn CSS - web.dev

Selectors Explained, kittygiraudel - GitHub