CSS 选择器
基本选择器
| 基本选择器 | 说明 | 用法 |
|---|---|---|
| 通配选择器 | 选中所有标签，一般用于清除样式 | * {color:red} |
| 元素选择器 | 选中所有同种标签，但是不能差异化选择 | h1 {color:red} |
| 类选择器 | 选中所有特定类名（ class 值）的元素,使用频率很高 | .say {color:red} |
| ID 选择器 | 选中特定 id 值的那个元素（唯一的） | #earthy {color:red} |
复合选择器
| 复合选择器 | 说明 | 用法 | 符号 |
|---|---|---|---|
| 交集选择器(且) | 选中同时符合多个条件的元素 | 选择器1选择器2 {} | 紧挨着 |
| 并集选择器(或) | 选中多个选择器对应的元素 | 选择器1,选择器2 {} | , |
| 后代选择器 | 符合要求的后代元素 | 选择器1 选择器2 {} | 空格 |
| 子代选择器 | 符合要求的子元素 | 选择器1>选择器2 {} | > |
| 相邻兄弟选择器 | 符合条件的相邻兄弟元素 | 选择器1+选择器2 {} | + |
| 通用兄弟选择器 | 符合条件的所有兄弟元素 | 选择器1~选择器2 {} | ~ |
| 属性选择器 | 选中属性值符合一定要求的元素 | 见下表 |
属性选择器
| 属性选择器语法 | 说明 |
|---|---|
| 选择器[属性名] | 选中具有某个属性的元素。 |
| 选择器[属性名="值"] | 选中包含某个属性，且属性值等于指定值的元素。 |
| 选择器[属性名^="值"] | 选中包含某个属性，且属性值以指定的值开头的元素。 |
| 选择器[属性名$="值"] | 选中包含某个属性，且属性值以指定的值结尾的元素。 |
| 选择器[属性名*=“值”] | 选择包含某个属性，属性值包含指定值的元素。 |
css
/* 选择器[属性名]: 选中具有title属性的元素 */
div[title] {
color: red;
}
/* 选择器[属性名="值"]: 选中title属性值为atguigu的元素 */
div[title='atguigu'] {
color: red;
}
/* 选择器[属性名^="值"]: 选中title属性值以a开头的元素 */
div[title^='a'] {
color: red;
}
/* 选择器[属性名$="值"]: 选中title属性值以u结尾的元素 */
div[title$='u'] {
color: red;
}
/* 选择器[属性名*=“值”]: 选中title属性值包含g的元素 */
div[title*='g'] {
color: red;
}伪类选择器
伪类: 有类的作用,但不是类
动态伪类
| 伪类选择器 | 说明 | 示例 |
|---|---|---|
:hover | 当鼠标悬停在元素上 | button:hover { background: yellow; } |
:active | 元素被激活（如点击时） | a:active { color: green; } |
:focus | 元素获得焦点 | input:focus { border-color: blue; } |
:visited | 用户已访问的链接 | a:visited { color: purple; } |
:link | 用户未访问的链接 | a:link { color: red; } |
注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active
结构伪类
| 常用语法 | 说明 |
|---|---|
选择器:first-child | 所有兄弟元素中的第一个。 |
选择器:last-child | 所有兄弟元素中的最后一个。 |
选择器:nth-child(n) | 所有兄弟元素中的第 n 个。 |
选择器:first-of-type | 所有同类型兄弟元素中的第一个。 |
选择器:last-of-type | 所有同类型兄弟元素中的最后一个。 |
选择器:nth-of-type(n) | 所有同类型兄弟元素中的 第 n 个 。 |
| 了解语法 | 说明 |
|---|---|
选择器:nth-last-child(n) | 所有兄弟元素中的倒数第 n 个。 |
选择器:nth-last-of-type(n) | 所有同类型兄弟元素中的 倒数第 n 个 。 |
选择器:only-child | 选择没有兄弟的元素（独生子女）。 |
选择器:only-of-type | 选择没有同类型兄弟的元素。 |
选择器:root | 根元素,html:root=:root |
选择器:empty | 内容为空元素（空格也算内容）。 |
关于 n 的值：公式都是 an+b 的格式
0或 不写 ：什么都选不中 —— 几乎不用。n：选中所有子元素 —— 几乎不用。1 ~ ∞：选中对应序号的子元素。2n或even：选中序号为偶数的子元素。2n+1或odd：选中序号为奇数的子元素。-n+3：选中的是前 3 个。
UI 伪类
| 伪类选择器 | 说明 | 示例 |
|---|---|---|
:checked | 选中的复选框或单选框 | input:checked { border: 2px solid green; } |
:disabled | 被禁用的表单元素 | input:disabled { background: #ccc; } |
:enabled | 可用的表单元素 | input:enabled { background: white; } |
:indeterminate | 不确定状态（主要是 radio 组或进度条） | input:indeterminate |
表单元素
| 伪类选择器 | 说明 | 示例 |
|---|---|---|
:checked | 选中的复选框或单选框 | input:checked { border: 2px solid green; } |
:disabled | 被禁用的表单元素 | input:disabled { background: #ccc; } |
:enabled | 可用的表单元素 | input:enabled { background: white; } |
:required | 必填的表单字段 | input:required { border-left: 3px solid red; } |
:optional | 可选的表单字段 | input:optional { border-left: 3px solid green; } |
:valid | 值合法的表单字段 | input:valid { background: #e0ffe0; } |
:invalid | 值不合法的表单字段 | input:invalid { background: #ffe0e0; } |
:in-range | 值在 min-max 范围内的输入框 | input:in-range |
:out-of-range | 值超出 min-max 范围的输入框 | input:out-of-range |
:read-only | 有 readonly 属性的或内容不可编辑的元素 | input:read-only |
:read-write | 没有 readonly 属性、可编辑的元素 | input:read-write |
否定伪类
| 语法 | 说明 |
|---|---|
选择器:not(选择器) | 排除满足括号中条件的元素 |
CSS4 新增
| 伪类 | 语法示例 | 功能说明 |
|---|---|---|
:where() | :where(.a, .b) | 功能同普通选择器，但括号内的特异性(权重)为 0 |
:is() | :is(header, main, footer) p | 匹配列表中任意一个选择器，特异性取最大值 |
:has() | article:has(> img) | 父元素/祖先元素选择器，选择包含指定子元素的元素 |
:focus-visible | button:focus-visible | 只有当元素应该显示键盘焦点指示器时才匹配（比:focus 更智能） |
:focus-within | form:focus-within | 表单或其子元素获得焦点时生效 |
目标伪类（了解）
| 语法 | 说明 |
|---|---|
选择器:target | 选中锚点指向的元素 |
语言伪类（了解）
| 语法 | 说明 |
|---|---|
选择器:lang(语言) | 根据指定的语言选择元素 |
伪元素选择器
作用：选中元素中的一些特殊位置
| 伪元素选择器 | 作用说明 | 常用示例 |
|---|---|---|
::before | 在元素内容前插入内容 | p::before { content: "★"; } |
::after | 在元素内容后插入内容 | p::after { content: "★"; } |
::first-line | 选中元素的第一行文本 | p::first-line { font-weight: bold; } |
::first-letter | 选中元素的首字母 | p::first-letter { font-size: 2em; } |
::selection | 选中文本时的样式 | p::selection { background: yellow; } |
::marker | 列表项的标记（如圆点、数字） | li::marker { color: red; } |
::placeholder | 输入框的占位符文本 | input::placeholder { color: gray; } |
::backdrop | 模态元素（如 <dialog>）背景 | dialog::backdrop { background: rgba(0,0,0,0.5); } |
::cue | 视频字幕或媒体轨道的文本 | ::cue { color: yellow; } |
::spelling-error | 标记拼写错误的文本 | span::spelling-error { text-decoration: underline red; } |
::grammar-error | 标记语法错误的文本 | span::grammar-error { text-decoration: underline orange; } |
选择器权重
!important > 行内样式(1,0,0,0) > ID 选择器(0,1,0,0) > 类选择器(0,0,1,0) > 元素选择器(0,0,0,1) > 通配选择器(0,0,0,0)
权重计算
- 每个选择器，都可计算出一组权重(特异性)，格式为：
(a,b,c,d) !important不属于选择器权重（specificity）体系，不会算进 (a,b,c,d),!important 会把声明提升到「权重体系之外的最高优先级」a: 行内样式b: ID 选择器的个数c: 类、伪类、属性 选择器的个数d: 元素、伪元素 选择器的个数
| 选择器 | 权重 |
|---|---|
ul>li | (0,0,0,2) |
div ul>li p a span | (0,0,0,6) |
#atguigu .slogan | (0,1,1,0) |
#atguigu .slogan a | (0,1,1,1) |
#atguigu .slogan a:hover | (0,1,2,1) |
权重比较
按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比
(0,1,0,0)>(0,0,2,2)(0,1,1,0)>(0,1,0,3)(0,1,1,3)>(0,1,1,2)