::placeholder、::selection 与 ::marker
使用伪元素设置输入占位符、文本选区和列表标记项目符号的样式。
::placeholder、::selection 与 ::marker 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
::placeholder
::placeholder 用于设置表单 input 和 textarea 元素中的占位文本样式。它只支持一部分 CSS 属性。
<input type="text" placeholder="Type your name…" />支持的 ::placeholder 属性
并非所有 CSS 属性都适用于 ::placeholder。支持的属性包括：color、font-size、font-weight、font-style、letter-spacing、opacity 以及其他少数属性。不支持布局属性。
占位文本的可访问性
用户输入内容后占位文本会消失，因此不应将其用作 <label> 元素的替代品。请始终为表单字段提供可见的标签。占位文本的对比度也必须符合 WCAG 4.5:1 的比例要求。
::selection
::selection 用于设置用户使用光标选中的文本样式。它可以创建符合品牌风格的选中文本颜色。
<p>Select this text with your cursor to see the branded highlight color.</p>::selection 支持的属性
只有少数属性适用于 ::selection：color、background-color、text-shadow 和 text-decoration。其他属性会被忽略。
::marker
::marker 用于设置列表项标记的样式，也就是 <ul> 和 <ol> 列表中的项目符号或编号。
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>::marker 支持的属性
::marker 支持的属性包括：color、content、font-size、font-family、font-weight、font-style 和 unicode-bidi。
使用 ::marker 自定义列表标记
使用表情符号或特殊字符作为列表标记：
<ul>
<li>Normal item</li>
<li class="warning">Warning item</li>
</ul>::first-line
::first-line 用于设置块级元素渲染后的第一行样式——它针对的是实际渲染出的行，而不是 HTML 中的第一个换行。它适合用于创建类似首字下沉的引导段落样式。
<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>::first-letter
::first-letter 用于定位第一行格式化文本中的第一个字母。经典用途是为杂志风格的排版创建首字下沉效果。
<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>使用 ::cue 设置字幕样式
::cue 用于设置 HTML <video> 元素中的 VTT 字幕样式，是一种专业但对无障碍媒体非常重要的伪元素。
<p style="color:#888;">::cue styles VTT subtitle text inside a <video> element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>快速检查
哪个伪元素可以设置列表项的项目符号或编号样式？
回顾
::placeholder 用于设置输入占位文本的样式。::selection 用于设置选中文本的样式。::marker 用于设置列表项目符号和编号的样式。::first-letter 和 ::first-line 可用于精细调整排版。它们都只支持有限的一部分 CSS 属性。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「::placeholder、::selection 与 ::marker」课时是免费的吗？
是的 — 「::placeholder、::selection 与 ::marker」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「::placeholder、::selection 与 ::marker」这节课中我会学到什么？
使用伪元素设置输入占位符、文本选区和列表标记项目符号的样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「::placeholder、::selection 与 ::marker」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- ::before 与 ::after 内容
- ::placeholder、::selection 与 ::marker
- 使用 ::before 的 CSS 计数器
- 使用伪元素创建装饰图案