doc: update css.md. fb464bd4ff

2025-06-19 21:51:20 +08:00 · 2022-10-30 15:11:36 +00:00
parent 1ac826177b
commit f3e8ebf102
1 changed files with 48 additions and 4 deletions
--- a/docs/css.html
+++ b/docs/css.html
@ -305,7 +305,7 @@



-<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>a[target]</code></td><td align="left">带有 <yel>target</yel> 属性</td></tr><tr><td align="left"><code>a[target="_blank"]</code></td><td align="left">在新标签中打开</td></tr><tr><td align="left"><code>a[href^="/index"]</code></td><td align="left">以 <yel>/index</yel> 开头</td></tr><tr><td align="left"><code>[class|="chair"]</code></td><td align="left">以<yel>chair</yel>开头</td></tr><tr><td align="left"><code>[class*="chair"]</code></td><td align="left">包含<yel>chair</yel></td></tr><tr><td align="left"><code>[title~="chair"]</code></td><td align="left">包含单词 <yel>chair</yel></td></tr><tr><td align="left"><code>a[href$=".doc"]</code></td><td align="left">以 <yel>.doc</yel> 结尾</td></tr><tr><td align="left"><code>[type="button"]</code></td><td align="left">指定类型</td></tr></tbody></table>
+<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>a[target]</code></td><td align="left">带有 <yel>target</yel> 属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attr">#</a></td></tr><tr><td align="left"><code>a[target="_blank"]</code></td><td align="left">在新标签中打开 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue">#</a></td></tr><tr><td align="left"><code>a[href^="/index"]</code></td><td align="left">以 <yel>/index</yel> 开头 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_4">#</a></td></tr><tr><td align="left"><code>[class|="chair"]</code></td><td align="left">以<yel>chair</yel>开头 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_3">#</a></td></tr><tr><td align="left"><code>[class*="chair"]</code></td><td align="left">包含<yel>chair</yel> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_6">#</a></td></tr><tr><td align="left"><code>[title~="chair"]</code></td><td align="left">包含单词 <yel>chair</yel> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_2">#</a></td></tr><tr><td align="left"><code>a[href$=".doc"]</code></td><td align="left">以 <yel>.doc</yel> 结尾 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_5">#</a></td></tr><tr><td align="left"><code>[type="button"]</code></td><td align="left">指定类型 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue">#</a></td></tr></tbody></table>
 <p>另见: <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors">属性选择器</a></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="用户操作伪类"><a aria-hidden="true" tabindex="-1" href="#用户操作伪类"><span class="icon icon-link"></span></a>用户操作伪类</h3><div class="wrap-body">

@ -388,7 +388,23 @@



-<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>p::after</code></td><td align="left">在 p 之后添加内容 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after">#</a></td></tr><tr><td align="left"><code>p::before</code></td><td align="left">在 p 之前添加内容 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before">#</a></td></tr><tr><td align="left"><code>p::first-letter</code></td><td align="left">p中的第一个字母 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-letter">#</a></td></tr><tr><td align="left"><code>p::first-line</code></td><td align="left">p 中的第一行 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-line">#</a></td></tr><tr><td align="left"><code>::selection</code></td><td align="left">由用户选择 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection">#</a></td></tr><tr><td align="left"><code>::placeholder</code></td><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder">占位符</a> 属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder">#</a></td></tr><tr><td align="left"><code>:root</code></td><td align="left">文档根元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root">#</a></td></tr><tr><td align="left"><code>:target</code></td><td align="left">突出显示活动锚点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target">#</a></td></tr><tr><td align="left"><code>div:empty</code></td><td align="left">没有子元素的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty">#</a></td></tr><tr><td align="left"><code>p:lang(en)</code></td><td align="left">带有 en 语言属性的 P <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang">#</a></td></tr><tr><td align="left"><code>:not(span)</code></td><td align="left">不是跨度的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not">#</a></td></tr></tbody></table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>p::after</code></td><td align="left">在 p 之后添加内容 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after">#</a></td></tr><tr><td align="left"><code>p::before</code></td><td align="left">在 p 之前添加内容 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before">#</a></td></tr><tr><td align="left"><code>p::first-letter</code></td><td align="left">p中的第一个字母 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-letter">#</a></td></tr><tr><td align="left"><code>p::first-line</code></td><td align="left">p 中的第一行 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-line">#</a></td></tr><tr><td align="left"><code>::selection</code></td><td align="left">由用户选择 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection">#</a></td></tr><tr><td align="left"><code>::placeholder</code></td><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder">占位符</a> 属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder">#</a></td></tr><tr><td align="left"><code>:root</code></td><td align="left">文档根元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root">#</a></td></tr><tr><td align="left"><code>:target</code></td><td align="left">突出显示活动锚点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target">#</a></td></tr><tr><td align="left"><code>div:empty</code></td><td align="left">没有子元素的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty">#</a></td></tr><tr><td align="left"><code>p:lang(en)</code></td><td align="left">带有 en 语言属性的 P <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang">#</a></td></tr><tr><td align="left"><code>:not(span)</code></td><td align="left">不是跨度的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not">#</a></td></tr><tr><td align="left"><code>:host</code></td><td align="left">shadowDOM 中选择自定义元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root">#</a></td></tr><tr><td align="left"><code>::backdrop</code></td><td align="left">处于全屏模式的元素样式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::backdrop">#</a></td></tr><tr><td align="left"><code>::marker</code></td><td align="left"><code>li</code> 项目符号或者数字 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker">#</a></td></tr><tr><td align="left"><code>::file-selector-button</code></td><td align="left">type="file" <code>input</code> 按钮 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::file-selector-button">#</a></td></tr></tbody></table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="输入伪类"><a aria-hidden="true" tabindex="-1" href="#输入伪类"><span class="icon icon-link"></span></a>输入伪类</h3><div class="wrap-body">


@ -451,7 +467,15 @@



-<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>input:checked</code></td><td align="left">检查 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked">#</a></td></tr><tr><td align="left"><code>input:disabled</code></td><td align="left">禁用 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled">#</a></td></tr><tr><td align="left"><code>input:enabled</code></td><td align="left">启用的 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled">#</a></td></tr><tr><td align="left"><code>input:focus</code></td><td align="left"><code>input</code> 有焦点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus">#</a></td></tr><tr><td align="left"><code>input:in-range</code></td><td align="left">范围内的值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range">#</a></td></tr><tr><td align="left"><code>input:out-of-range</code></td><td align="left"><code>input</code> 值超出范围 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range">#</a></td></tr><tr><td align="left"><code>input:valid</code></td><td align="left"><code>input</code> 有效值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:valid">#</a></td></tr><tr><td align="left"><code>input:invalid</code></td><td align="left"><code>input</code> 无效值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:invalid">#</a></td></tr><tr><td align="left"><code>input:optional</code></td><td align="left">没有必需的属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:optional">#</a></td></tr><tr><td align="left"><code>input:required</code></td><td align="left">带有必需属性的 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:required">#</a></td></tr><tr><td align="left"><code>input:read-only</code></td><td align="left">具有只读属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-only">#</a></td></tr><tr><td align="left"><code>input:read-write</code></td><td align="left">没有只读属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-write">#</a></td></tr><tr><td align="left"><code>input:indeterminate</code></td><td align="left">带有 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:indeterminate">indeterminate</a> 状态 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:indeterminate">#</a></td></tr></tbody></table>
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>input:checked</code></td><td align="left">检查 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked">#</a></td></tr><tr><td align="left"><code>input:disabled</code></td><td align="left">禁用 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled">#</a></td></tr><tr><td align="left"><code>input:enabled</code></td><td align="left">启用的 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled">#</a></td></tr><tr><td align="left"><code>input:default</code></td><td align="left">有默认值的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:default">#</a></td></tr><tr><td align="left"><code>input:blank</code></td><td align="left">空的输入框 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:blank">#</a></td></tr><tr><td align="left"><code>input:focus</code></td><td align="left"><code>input</code> 有焦点 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus">#</a></td></tr><tr><td align="left"><code>input:in-range</code></td><td align="left">范围内的值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range">#</a></td></tr><tr><td align="left"><code>input:out-of-range</code></td><td align="left"><code>input</code> 值超出范围 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range">#</a></td></tr><tr><td align="left"><code>input:valid</code></td><td align="left"><code>input</code> 有效值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:valid">#</a></td></tr><tr><td align="left"><code>input:invalid</code></td><td align="left"><code>input</code> 无效值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:invalid">#</a></td></tr><tr><td align="left"><code>input:optional</code></td><td align="left">没有必需的属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:optional">#</a></td></tr><tr><td align="left"><code>input:required</code></td><td align="left">带有必需属性的 <code>input</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:required">#</a></td></tr><tr><td align="left"><code>input:read-only</code></td><td align="left">具有只读属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-only">#</a></td></tr><tr><td align="left"><code>input:read-write</code></td><td align="left">没有只读属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-write">#</a></td></tr><tr><td align="left"><code>input:indeterminate</code></td><td align="left">带有 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:indeterminate">indeterminate</a> 状态 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:indeterminate">#</a></td></tr></tbody></table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="结构伪类"><a aria-hidden="true" tabindex="-1" href="#结构伪类"><span class="icon icon-link"></span></a>结构伪类</h3><div class="wrap-body">


@ -506,7 +530,27 @@



-<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>p:first-child</code></td><td align="left">第一个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child">#</a></td></tr><tr><td align="left"><code>p:last-child</code></td><td align="left">最后一个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child">#</a></td></tr><tr><td align="left"><code>p:first-of-type</code></td><td align="left">首先是某种类型 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type">#</a></td></tr><tr><td align="left"><code>p:last-of-type</code></td><td align="left">某种类型的最后一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type">#</a></td></tr><tr><td align="left"><code>p:nth-child(2)</code></td><td align="left">其父母的第二个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">#</a></td></tr><tr><td align="left"><code>p:nth-child(3n42)</code></td><td align="left">Nth-child(an + b) 公式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">#</a></td></tr><tr><td align="left"><code>p:nth-last-child(2)</code></td><td align="left">后面的二孩 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-child">#</a></td></tr><tr><td align="left"><code>p:nth-of-type(2)</code></td><td align="left">其父级的第二个 p <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type">#</a></td></tr><tr><td align="left"><code>p:nth-last-of-type(2)</code></td><td align="left">...从后面 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type">#</a></td></tr><tr><td align="left"><code>p:only-of-type</code></td><td align="left">其父级的唯一性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type">#</a></td></tr><tr><td align="left"><code>p:only-child</code></td><td align="left">其父母的唯一孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child">#</a></td></tr></tbody></table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th align="left">选择器</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>p:first-child</code></td><td align="left">第一个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child">#</a></td></tr><tr><td align="left"><code>p:last-child</code></td><td align="left">最后一个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child">#</a></td></tr><tr><td align="left"><code>p:first-of-type</code></td><td align="left">首先是某种类型 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type">#</a></td></tr><tr><td align="left"><code>p:last-of-type</code></td><td align="left">某种类型的最后一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type">#</a></td></tr><tr><td align="left"><code>p:nth-child(2)</code></td><td align="left">其父母的第二个孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">#</a></td></tr><tr><td align="left"><code>p:nth-child(3n42)</code></td><td align="left">Nth-child(an + b) 公式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child">#</a></td></tr><tr><td align="left"><code>p:nth-last-child(2)</code></td><td align="left">后面的二孩 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-child">#</a></td></tr><tr><td align="left"><code>p:nth-of-type(2)</code></td><td align="left">其父级的第二个 p <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type">#</a></td></tr><tr><td align="left"><code>p:nth-last-of-type(2)</code></td><td align="left">...从后面 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type">#</a></td></tr><tr><td align="left"><code>p:only-of-type</code></td><td align="left">其父级的唯一性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type">#</a></td></tr><tr><td align="left"><code>p:only-child</code></td><td align="left">其父母的唯一孩子 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child">#</a></td></tr><tr><td align="left"><code>:is(header, div) p</code></td><td align="left">可以选择的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is">#</a></td></tr><tr><td align="left"><code>:where(header, div) p</code></td><td align="left">与 <code>:is</code> 相同 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where">#</a></td></tr><tr><td align="left"><code>a:has(> img)</code></td><td align="left">包含 <code>img</code> 元素的 <code>a</code> 元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has">#</a></td></tr><tr><td align="left"><code>::first-letter</code></td><td align="left">第一行的第一个字母 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-letter">#</a></td></tr><tr><td align="left"><code>::first-line</code></td><td align="left">第一行应用样式 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-line">#</a></td></tr></tbody></table>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="css-字体"><a aria-hidden="true" tabindex="-1" href="#css-字体"><span class="icon icon-link"></span></a>CSS 字体</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="属性"><a aria-hidden="true" tabindex="-1" href="#属性"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
 <!--rehype:wrap-class=row-span-3-->