本文详解竖线符号（|）的输入方法、Unicode 编码、常见键盘操作，以及其在 CSS 属性选择器 [attr|=value] 中的语义与实际用法，并附可运行示例与关键注意事项。
本文详解竖线符号（|）的输入方法、unicode 编码、常见键盘操作，以及其在 css 属性选择器 `[attr|=value]` 中的语义与实际用法，并附可运行示例与关键注意事项。
竖线符号 |（U+007C，Unicode 名称：Vertical Line）是编程、正则表达式、命令行管道及 CSS 选择器中广泛使用的特殊字符。它不是破折号、分隔线或中文顿号，而是一个独立的 ASCII 标点符号，常被误称为“直线”或“竖杠”。在英文语境中，它更常被称为 pipe（管道符）或 vertical bar（竖直条）。
✅ 正确输入方式（跨平台通用）
-
Windows / macOS / Linux 标准键盘：按住 Shift + \（反斜杠键，通常位于回车键左侧或右下角）。
⚠️ 注意：部分非美式键盘（如 UK、DE、FR）布局不同——例如英式键盘需按 Alt Gr + 7；日文键盘可能为 Alt + ¥。建议在文本编辑器中开启「显示不可见字符」或使用 Unicode Lookup 验证输入结果。
-
HTML 中安全输出：若需在网页中显示该符号本身（而非被解析），推荐使用实体编码：
| <!-- 十进制 --> | <!-- 命名实体，需 DOCTYPE 支持 -->
避免直接写 | 在某些 XML/HTML 上下文中引发解析歧义。
? 在 CSS 中的特定语义：[attr|=value]
该符号在 CSS 属性选择器中具有明确定义的语义——匹配以指定值开头、后接连字符 - 或完全等于该值的属性内容。这与模糊匹配（如 *=）或前缀匹配（如 ^=）有本质区别，专为语言子代码（language subtags）和分类前缀设计。
/* 匹配 lang="en" 或 lang="en-US" 或 lang="en-GB"，但不匹配 lang="english" */
[lang|="en"] { font-family: system-ui; }
/* 匹配 class="size" 或 class="size-small"，但不匹配 class="size_small"（下划线）或 class="large-size"（顺序不符） */
[class|="size"] { color: #d32f2f; }对应 HTML 示例：
<div class="size">✔ 完全匹配</div> <div class="size-small">✔ 前缀 + 连字符匹配</div> <div class="size_medium">✘ 下划线不触发</div> <div class="size small">✘ 空格分隔不视为连字符</div> <div class="size-small-or-large">✔ 仍匹配（只要开头是 "size-"）</div>
⚠️ 关键注意事项
-
不可混淆其他相似符号：
- ‖（U+2016，Double Vertical Line）→ 数学/逻辑双竖线，非 CSS 有效符；
- ︱（U+FE39，Presentation Form for Vertical Ideographic Full Stop）→ 中文排版符号，CSS 中无效；
- │（U+2502，Box Drawings Light Vertical）→ 制表符，用于 ASCII 图形，非标准竖线。
CSS 规范要求严格：[attr|=value] 中的 |= 必须紧邻方括号与属性名，中间不能有空格；value 不支持通配符或正则语法。
现代替代方案提示：虽然 |= 仍被所有主流浏览器支持，但在处理多语言场景时，推荐结合 :lang() 伪类（如 :lang(en)）获得更语义化、更可靠的匹配。
掌握 | 的输入与语义，不仅解决“打不出这个符号”的困扰，更能避免因符号误用导致的 CSS 选择器失效或正则逻辑错误——它是开发者工具箱中一枚小而关键的“精准匹配螺丝钉”。
