前端Wiki/CSS/基础/选择器

伪类与伪元素

伪类用单个冒号，描述元素的状态或位置；伪元素用双冒号，表示元素的某个部分或凭空创建的内容。

常用伪类：:hover 悬停、:focus 聚焦、:active 按下瞬间、:first-child 第一个孩子、:last-child 最后一个、:nth-child(n) 第 n 个（支持 2n、odd、even 等表达式）。
常用伪元素：::before / ::after 在内容前后插入虚拟元素（必须配 content 属性）、::first-line 首行、::selection 被选中的文字。

::before/::after 是 CSS 界的瑞士军刀：装饰性图标、分隔线、清除浮动都靠它们，且不往 HTML 里塞多余标签。

本节要点一个冒号是伪类（状态），两个冒号是伪元素（部分）；:nth-child() 能搞定隔行变色等规律性选择；::before/::after 必须写 content。

CSS

<style>
  a:hover { color: tomato; }          /* 悬停变色 */
  input:focus { outline: 2px solid teal; } /* 聚焦描边 */
  li:nth-child(odd) { background: #f2f2f2; } /* 奇数行灰底 */
  li:first-child { font-weight: bold; }
  .quote::before {
    content: '「';                    /* 插入前引号 */
    color: gray;
  }
  .quote::after {
    content: '」';
  }
</style>
<ul>
  <li>第一项（加粗）</li>
  <li>第二项（灰底）</li>
  <li>第三项（灰底）</li>
</ul>
<p class="quote">伪元素插入的引号</p>

🔗 相关词条HTML 清除浮动 CSS 标签元素伪类

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读