anjia
commented
2 years ago 一. CSS 选择器
CSS 选择器是 CSS 规则的一部分，CSS 规则描述了该规则将匹配文档中的哪些元素，匹配到的元素将应用规则的指定样式。
CSS 选择器有 4 大类，如下：
| 分类 | 选择器 | 说明 | 备注 |
|---|---|---|---|
| 基本选择器 | ID 选择器 | #id |
|
| 类选择器 | .class |
||
| 类型选择器 | elementName |
可带命名空间 | |
| 属性选择器 | 根据特定属性的存在或值 | ||
| 通配符 | * 匹配所有类型 |
可带命名空间 | |
| 组合选择器 | A B |
全后代 | 来的都是亲戚（后辈） |
A > B |
直接子 | > 直系后一代（子女） |
|
A + B |
紧跟后面的那一个亲兄弟 | + 手拉手的那一个（兄弟） |
|
A ~ B |
后面的全部兄弟们 | ~ 一条船上的（兄弟） |
|
| 伪选择器 | 伪类 | : 元素的特定状态 |
|
| 伪元素 | :: 元素的特定部分 |
后产生的所以有两个: |
|
| 分组选择器 | A, B |
多个独立选择器以 , 分隔 |
很直观 |
可以使用命名空间的选择器（类型选择器和通配符）在处理包含多个命名空间的文档时会很有用，比如 HTML5 里带有内联的 SVG 和 MathML，或者 XML 元素。
- basic selectors, 基本选择器
- combinators /ˈkɒmbɪneɪtər/, 组合/复合符
- pseudo /ˈs(j)uːdoʊ/, 伪
- grouping selectors, 分组选择器
下面详细介绍下属性选择器、伪类和伪元素。
属性选择器（9个）
属性选择器根据给定属性的存在或值来匹配元素。
| 格式 | 说明 | 例子 |
|---|---|---|
[attr] |
存在属性 | [required] |
[attr=value] |
属性值等于 value |
input[type="text"] |
[attr^=value] |
值以 value 开头 |
a[href^="#"] |
[attr$=value] |
值以 value 结尾 |
a[href$="github.com"] |
[attr*=value] |
值包含 value 字符串 |
a[href*="/docs/"] |
[attr~=value] |
空格分隔的值，其中有个等于 value |
div[class~="g-title"] |
[attr\|=value] |
值等于 value 或值以 value 开头且后跟连字符 - |
div[lang\|="zh"] |
[attr operator value i] |
属性选择器后面跟字符 i 或 I表示比较不分大小写（ASCII 字符） |
|
[attr operator value s] |
属性选择器后面跟字符 s 或 S表示比较区分大小写（ASCII 字符） |
a[href*="cAsE" s] |
case-sensitive, 大小写敏感
case-insensitive, 大小写不敏感
属性选择器可以将多个连起来使用，比如 a[href^="https"][href$=".com"]。
伪类
伪类根据所选元素的指定状态来匹配元素。
| 分类 | 伪类 | 说明 |
|---|---|---|
| 用户操作（5个） | :hover:active |
|
:focus:focus-visible:focus-within |
||
| 位置（7个） | :link:visited:any-link:local-link |
没被访问的链接 已被访问 包含以上两种 指向相同文档的链接 |
:target:target-within |
当前文档里的目标元素 | |
:scope |
选择器的参考点 | |
| DOM 树结构（14个） | :first-child:last-child:only-child:nth-child():nth-last-child() |
兄弟(An+B) |
:first-of-type:last-of-type:only-of-type:nth-of-type():nth-last-of-type() |
也是兄弟(An+B) |
|
:empty |
没孩子，除了空白字符 | |
:root |
根节点 | |
:nth-col():nth-last-col() |
||
| 输入（17个） | :disabled:enabled:checked:required:optional:read-write:read-only |
禁用状态 启用 必填 可选 可读写（可编辑） 只读（不能修改） |
:placeholder-shown:blank:valid:invalid:user-invalid:in-range:out-of-range:autofill |
显示占位符 内容是空 内容有效 内容无效 输入无效（仅交互时） 值在范围内 值超范围了 内容被浏览器自动填充了 |
|
:default:indeterminate |
一组表单元素中的默认元素 状态不确定的表单元素 |
|
| 语言（2个） | :lang():dir() |
|
| 多媒体（7个） | :past:current:future |
WebVTT，比如字幕 |
:playing:paused |
多媒体的状态 | |
:fullscreen:picture-in-picture |
||
| Web Components（4个） | :defined:host:host():host-context() |
|
| Paged Media（3个） | :first:left:right |
|
| 其它（5个） | :is():where():not():has() |
老版本 matches(), :any() |
:state() |
pseudo-classes
- user action ... 用户操作
- location ... 位置
- tree-structural ... 树结构
- the input ... 输入
- linguistic ... 语言
- time-dimensional ... 时间维度
- resource state ... 资源状态
伪元素
伪元素用于选择元素的特定部分，我们只能在选择器中使用一个伪元素，且它必须在简单选择器之后。
| 分类 | 伪元素 | 说明 |
|---|---|---|
| 最常用（8个） | ::before::after |
|
::first-letter::first-line |
||
::selection |
被用户选中的内容，比如在文本上单击或拖拽鼠标 | |
::placeholder |
占位符文本，<input> 或 <textarea> |
|
::file-selector-button |
type="file" 的 <input> |
|
::marker |
列表项的标记框，通常是个圆点或数字 | |
| 其它（4个） | ::slotted()::part() |
Web Components |
::cue::cue-region |
WebVTT 提示，比如字幕 | |
| 实验中（4个） | ::backdrop |
全屏模式下，比如使用了全屏 API 或是 <dialog> 元素 |
::target-text |
滚动到的文本，对于支持滚动到文本片段的浏览器 | |
::spelling-error |
浏览器标记为拼写错误的文本片段 | |
::grammar-error |
浏览器标记为语法错误的文本片段 |
看几个例子
/* 命名空间 */
@namespace svg url(http://www.w3.org/2000/svg);
svg|* {
color: blue;
}
svg|a {
color: red;
}
/* 通配符 */
article *:first-child {
font-weight: bold;
}
article:first-child {
font-weight: bold;
}
.floating + * {
clear: left;
}
/* 属性选择器 */
div[lang] {
color: green;
}
div:not([lang]) {
font-style: italic;
}
div[data-lang="zh-TW"] {
color: purple;
}
div[lang|="zh"] {
color: red;
}
a[href^="https"][href$=".com"] {
text-decoration: underline;
}
/* 组合符 */
img + p {
font-weight: bold;
}
h1 ~ p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: 0.5em;
}
ul.my-things li {
margin: 2em;
}
/* 伪类+伪元素 */
a:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}
a:hover {
color: hotpink;
}
article p:first-child {
font-size: 120%;
font-weight: bold;
}
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
.box::after {
content: " ➥";
}
/* 多个简单选择器可连成一个 */
h1#heading {
color: rebeccapurple;
}
li.spacious.elegant {
margin: 2em;
}
ul > li[class="a"] {
}
a[href^="https"][href$=".com"] {
text-decoration: underline;
}
/* 分组选择器 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: helvetica;
}
#main,
.content,
article {
font-size: 1.1em;
}小结
本文简要介绍了 CSS 选择器，旨在对其有个整体印象。
| 选择器分类 | 选择器 | 内容 | 说明 | 相关链接 |
|---|---|---|---|---|
| 基本选择器 | #id |
|||
.class |
||||
elementName |
||||
[] 存在/值 |
[attr][attr=value][attr^=value], [attr$=value][attr*=value], [attr~=value][attr\|=value][... i], [... s] |
存在 值等于 开始 + 结束 包含字符串, 字符项 值等于 or 值以 它-开头是否区分大小写 |
||
* |
||||
| 组合选择器 | A B |
全后代（后辈） | ||
A > B |
直接子（子女） | |||
A + B |
手拉手的那一个（兄弟） | |||
A ~ B |
一条船上的（兄弟） | |||
| 伪选择器 | : |
用户操作 + 位置 DOM结构 + 输入 语言 + 多媒体 + 函数 Web Components + Paged Media |
特定状态（64个） | |
:: |
before/after, 首字母/行 选中, 占位符, 列表标记 Web Components, 多媒体 |
特定部分（16个） | ||
| 分组选择器 | A, B |
NE-SmallTown
目录
#id,.class,elementName,[attr],*A B,A > B,A + B,A ~ B:,::A, B