选择器

基础选择器

标签选择器

根据 HTML 标签名 选中元素。

p {
  color: blue;
}

类选择器

根据元素的 class 属性 选中元素。 在 CSS 中用 . 开头。

.title {
  font-size: 20px;
  color: red;
}

ID 选择器

根据元素的 id 属性 选中元素。 在 CSS 中用 # 开头。

#main {
  background: lightgray;
}

通配符选择器

* {
  margin: 0;
  padding: 0;
}

关系选择器

根据 元素之间的层级或关系 来选择目标元素，A，B 表示选择的对象，A 和 B 之间的符号表示 A 和 B 之间的关系。

后代选择器 常用

选中 A 元素内部所有的 B 元素（无论嵌套多少层）。

div p {
  color: red;
}

<div>
  <p>我是 div 里面的 p</p>
  <section><p>我也会被选中</p></section>
</div>

子代选择器 常用

只选中 A 的直接子元素 B（不包括更深层的嵌套）。

div > p {
  color: blue;
}

<div>
  <p>我会变蓝</p>
  <section><p>我不会变蓝</p></section>
</div>

相邻兄弟选择器 较少使用

选中 紧跟在 A 后面的第一个兄弟元素 B。

h2 + p {
  color: green;
}

<h2>标题</h2>
<p>我会变绿</p>
<p>我不会变绿</p>

通用兄弟选择器较少使用

选中 A 后面的所有兄弟元素 B（不必紧挨着）

h2 ~ p {
  color: orange;
}

<h2>标题</h2>
<p>第一个段落</p>
<div>中间的div</div>
<p>第二个段落</p>

总结

关系选择器可以描述多个对象，不一定只有两个对象，他可以一层层向下寻找：

/*div的所有子代p，p中的直接子元素.box*/
div p > .box {
}

选择器	示例	匹配关系	匹配数量	常用场景	联想
后代选择器	A B	A 内所有 B	多个	嵌套样式，如菜单内的列表	无约束（ ）
子代选择器	A > B	A 的直接子元素 B	多个	限定层级结构	等级森严（>），只管直接下级
相邻兄弟选择器	A + B	紧挨着 A 的下一个兄弟 B	1 个	标题后第一个段落	两者能加（+），说明是兄弟
通用兄弟选择器	A ~ B	A 后所有兄弟 B	多个	同级多个相似元素	两者约等于（~），大家都是人

分组选择器

分组选择器（Group Selector） 用于 对多个选择器同时应用相同的样式。 选择器之间使用 逗号（,） 分隔。

/*分组选择器一般会进行换行*/
selector1,
selector2,
selector3 {
  property: value;
}

这样可以让多个元素共享同一套样式，避免重复书写。

属性选择器

属性选择器是一种根据元素属性来选取元素的 CSS 选择器。它可以让你不依赖类名或标签名，而是通过元素的 属性和值 来进行样式匹配。

选择器语法	作用描述	示例
[attr]	选择带有指定属性的元素	input[disabled]
[attr="value"]	属性值完全等于指定值	input[type="text"]
[attr~="value"]	属性值中包含某个独立单词（用空格分隔）	div[class~="active"]
[attr^="value"]	属性值以指定字符串开头	a[href^="https"]
[attr$="value"]	属性值以指定字符串结尾	img[src$=".png"]
[attr*="value"]	属性值中包含指定字符串（任意位置）	a[href*="example"]

示例

/*选择所有 type="text" 的输入框。*/
input[type="text"] {
  border: 1px solid #ccc;
}