css选择器

基本选择器

通配选择器

通配选择器用 * 来匹配任意类型的 HTML 元素. 在 CSS3 中，* 可以和命名空间组合使用.

// 选择test类名下所有的元素.
.test *{
  background: red;
}

note

不推荐使用通配选择器，因为它是性能最低的一个 CSS 选择器

类型选择器

通过节点名称匹配元素.

/* 所有 <a> 元素。*/
a {
  color: red;
}

类选择器

根据 class 属性的内容匹配元素

/* 所有含有 class="spacious" 类的元素 */
.spacious {
  margin: 2em;
}

ID 选择器

选择具有指定 ID 的元素。

/* id 为 "demo" 的元素会被选中 */
#demo {
  border: red 2px solid;
}

属性选择器

匹配那些具有特定属性或属性值的元素。

/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
  color: green;
}

分组选择器

选择器列表

选择器列表是以逗号分隔的多个选择器所组成的列表。

span,
div {
  border: red 2px solid;
}

组合器

后代选择器

通常用单个空格（" "）字符表示,组合了两个选择器,表示前一个选择器所选中的元素中所包含的后代元素.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

直接子代组合器

用于选择某个元素的直接子元素，> 被放在两个 CSS 选择器之间。被第二个选择器匹配的元素必须是被第一个选择器匹配的元素的直接子元素,即元素树结构中的一级关系。

/* 选择属于“my-things”类的无序列表（ul）的直接子列表元素（li） */
ul.my-things > li {
  margin: 2em;
}

通用兄弟选择器

通用兄弟选择器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

/* 在任意图像后的兄弟段落 */
img ~ p {
  color: red;
}

相邻兄弟组合器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父 element 的子元素，则第二个元素将被选中。

/* 图片后面紧跟着的段落将被选中 */
img + p {
  font-weight: bold;
}