CSS 笔记（三）：选择器

CSS 笔记（三）：选择器

为了给当前页面中的某个或某些标签中添加样式，必须通过某种方法选中某个或某些标签，此方法即为选择器

标签

选中当前页面中的所有指定标签

tag_name {
    key: value;
    ...
    key: value;
}

• 标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
• 标签选择器无论标签在何处都可以选中
• 凡是 HTML 中的标签都可以作为标签选择器

id

选中当前页面中所有具有指定 id 的标签

id 用于为某个标签指定一个唯一标识

#id_name {
    key: value;
    ...
    key: value;
}

• 每个 HTML 标签都有一个 id 属性
• 在同一个页面中 id 的名称不能重复
• 在使用 id 选择器时，id 名称之前必须存在 #
• id 的名称具有一定规范，只能由字母、数字和下划线组成，不能以数字开头，且不能是 HTML 标签的名称，在企业开发中，如果仅仅是为了设置样式，不会使用 id 属性，因为 id 属性是留给 JS 使用的

类

选中当前页面中所有具有指定 class 的标签

.class_name {
    key: value;
    ...
    key: value;
}

• 每个 HTML 标签都有一个 class 属性
• 在同一个页面中 class 的名称可以重复
• 在使用 class 选择器时，class 名称之前必须存在 .
• class 的名称规范与 id 的名称规范相同
• class 用于为某个（些）特定的标签设置样式
• 在 HTML 中每个标签可以同时属于多个类

<标签名称 class="class_name_1 class_name_2 ..."></标签名称>

---

id 与 class 的区别

• id 不可以重复，class 可以重复
• 一个 HTML 标签只能绑定一个 id，可以绑定多个 class

id 选择器与 class 选择器的区别

• id 选择器以 # 开头，而 class 选择器以 . 开头

为了减少重复代码，可以将一些公共的属性归档为一个 class，利用一个 HTML 标签可以绑定多个 class 的特性，为某个标签使用若干个 class

---

后代

选中当前页面中指定标签的所有特定的后代标签

selector_1 selector_2 ... {
    key: value;
    ...
    key: value;
}

在当前页面中，通过 选择器1 选中指定的标签，然后在此标签下通过 选择器2 选中所有指定的标签

• 使用后代选择器时，选择器之间必须使用 隔开
• 凡是属于某个标签的开始标签和结束标签的，不论是以何种形式（父子关系、爷孙关系等），均是该标签的后代标签

子元素

选中当前页面中指定标签的所有特定的直接子元素

selector_1>selector_2>... {
    key: value;
    ...
    key: value;
}

在当前页面中，通过 选择器1 选中指定的标签，然后在此标签下通过 选择器2 选中所有指定的直接子元素

• 子元素选择器只选中直接子标签（此标签与父标签仅为父子关系）
• 子元素选择器之间需要使用 > 符号连接，且不能使用空格

---

后代选择器和子元素选择器之间的区别

• 后代选择器使用 作为连接符号，子元素选择器使用 > 作为连接符号
• 后代选择器选中指定标签中所有特定的后代标签，子元素选择器选中指定标签中所有特定的直接子标签

后代选择器和子元素选择器之间的共同点

• 均可以使用任意选择器
• 均可以使用无限个选择器

---

交集

选中所有指定选择器所选中的共有标签

selector_1selector_2... {
    key: value;
    ...
    key: value;
}

• 选择器与选择器之间没有任何连接符号

并集

选中所有指定选择器所选中的所有标签

selector_1,selector_2,... {
    key: value;
    ...
    key: value;
}

• 选择器与选择器之间必须使用 , 来连接

兄弟

相邻

选中指定选择器所选中的之后的一个选择器选中的相邻标签

selector_1+selector_2+... {
    key: value;
    ...
    key: value;
}

• 选择器与选择器之间必须使用 + 来连接

通用

选中指定选择器所选中的之后的一个选择器选中的所有标签

selector_1~selector_2~... {
    key: value;
    ...
    key: value;
}

• 选择器与选择器之间必须使用 ~ 来连接

序

序选择器是 CSS3 中新增的选择器中最具代表性的

同级别

同级别类型的序选择器均不区分类型，仅考虑标签位置

selector:first-child

选中所有同级别中的指定选择器所选中的第一个标签

selector:last-child

选中所有同级别中的指定选择器所选中的最后一个标签

selector:nth-child(x)

选中所有同级别中的指定选择器所选中的所有标签中的第 x 个标签，x 可以为 odd、even，分别表示第奇数个和第偶数个，x 也可以为 xn + y 的形式，可以指定 x 和 y，n 为计数器，从 0 开始递增

selector:nth-last-child(x)

选中所有同级别中的指定选择器所选中的所有标签中的倒数第 x 个标签

selector:only-child

选中所有同级别中的以指定选择器所选中的标签，此标签为其它标签的唯一一个子标签（不可以存在其它标签）

同类型

selector:first-of-type

选中所有同级别中的指定选择器所选中的类型的第一个标签

selector:last-of-type

选中所有同级别中的指定选择器所选中的类型的最后一个标签

selector:nth-of-type(x)

选中所有同级别中的指定选择器所选中的类型的所有标签中的第 x 个标签，x 可以为 odd 和 even，分别表示第奇数个和第偶数个，x 也可以为 xn + y 的形式，可以指定 x 和 y，n 为计数器，从 0 开始递增

selector:nth-last-of-child(x)

选中所有同级别中的指定选择器所选中的类型的所有标签中的倒数第 x 个标签

selector:only-of-type

选中所有同级别中的指定选择器所选中的类型的标签，此标签为其它标签的唯一子标签（可以存在其它标签）

属性

selector[key]

在指定选择器所选中的标签中，选中具有指定属性名称的标签

selector[key=value]

在指定选择器所选中的标签中，选中具有指定属性以及属性值为特定值的标签，最常见的应用场景为区分 input 标签

selector[key^=value]

在指定选择器所选中的标签中，选中具有指定属性以及属性值以特定值开头的标签

selector[key$=value]

在指定选择器所选中的标签中，选中具有指定属性以及属性值以特定值结尾的标签

selector[key*=value]

在指定选择器所选中的标签中，选中具有指定属性以及属性值包含特定值的标签

通配符

选中当前页面中的所有标签

* {
    key: value;
    ...
    key: value;
}

伪元素

在指定标签的内容之前或之后添加一个子元素

selector::before {
    content: "...";
    key: value;
    ...
    key: value;
}

selector::after {
    content: "...";
    key: value;
    ...
    key: value;
}

• 可以通过设置 visibility 属性为 hidden 从而隐藏内容

a 标签的伪类选择器

默认的 a 标签存在一些状态，从未被访问过、长按时、悬停时、被访问过后

用于修改 a 标签在不同状态下的样式

从未访问过

a:link {
    key: value;
    ...
    key: value;
}

长按

a:active {
    key: value;
    ...
    key: value;
}

悬停

a:hover {
    key: value;
    ...
    key: value;
}

• 伪类选择器 hover 可以用在所有标签上

被访问过

a:visited {
    key: value;
    ...
    key: value;
}

• 可以仅设置一个状态样式，也可以同时设置，但是，若在同时状态下，必须存在一定顺序：未访问、被访问、悬停、激活

在开发过程中，a 标签的伪类选择器最好写在 a 标签选择器之后，且与 a 标签相关的属性（显示模式、宽高、padding、margin）均写在标签选择器中，而与 a 标签文字、背景相关的属性均写在伪类选择器中