js面试题---js伪类和伪元素的区别

一 伪类(Pseudo-classes)

1 定义

伪类是用于选择处于特定状态或条件下的 HTML 元素。它们通常以单冒号 (😃 开头,后面跟着伪类名称。这些状态可能与用户的交互、元素在文档中的结构位置等相关。

2 常见伪类

  1. :hover

当鼠标悬停在元素上时应用的样式。

javascript 复制代码
a:hover {
    color: red;
}
  1. :active

当元素被点击时应用的样式。

javascript 复制代码
button:active {
    background-color: green;
}
  1. :focus

当元素获得焦点时应用的样式(例如,输入框)。

javascript 复制代码
input:focus {
    border: 2px solid blue;
}
  1. :nth-child(n)

选择父元素中第 n 个子元素,可以使用公式(如 2n 表示偶数,2n+1 表示奇数)。

javascript 复制代码
li:nth-child(2n) {
    background-color: lightgray;
}
  1. :first-child

选择父元素的第一个子元素。

javascript 复制代码
p:first-child {
    font-weight: bold;
}
  1. :last-child

选择父元素的最后一个子元素。

javascript 复制代码
p:last-child {
    color: blue;
}
  1. :not(selector)

选择不匹配给定选择器的元素。

javascript 复制代码
div:not(.special) {
    background-color: yellow;
}

用法示例

javascript 复制代码
html<ul>
    <li>Item 1</li>
    <li class="special">Item 2</li>
    <li>Item 3</li>
</ul>

<style>
li:hover {
    background-color: lightblue; /* 鼠标悬停时改变背景 */
}
li.special {
    font-weight: bold; /* 特殊项加粗 */
}
li:nth-child(2) {
    text-decoration: underline; /* 第二项下划线 */
}
</style>

二 伪元素(Pseudo-elements)

1 定义

伪元素用于选择元素的特定部分或创建虚拟元素。它们通常以双冒号 (:😃 开头,后面跟着伪元素名称。伪元素可以用来插入内容、样式化特定部分等。

2 常见伪元素

  1. ::before

在元素内容之前插入内容。

javascript 复制代码
p::before {
    content: "Notice: ";
    font-weight: bold;
}
  1. ::after

在元素内容之后插入内容。

javascript 复制代码
p::after {
    content: " Thank you!";
}
  1. ::first-line

选择块级元素的第一行文本,并可以为其应用样式。

javascript 复制代码
p::first-line {
    font-weight: bold;
}
  1. ::first-letter

选择块级元素的第一个字母,并可以为其应用样式。

javascript 复制代码
p::first-letter {
    font-size: 2em;
    color: red;
}

用法示例

javascript 复制代码
<p>This is a sample paragraph.</p>

<style>
p::before {
    content: "Note: "; /* 在段落前添加内容 */
    font-weight: bold;
}

p::after {
    content: " [End of paragraph]"; /* 在段落后添加内容 */
}

p::first-line {
    color: blue; /* 第一行文字变为蓝色 */
}

p::first-letter {
    font-size: 2em; /* 第一个字母变大 */
    color: orange; /* 第一个字母变为橙色 */
}
</style>

三 伪类与伪元素的区别

特性 伪类 伪元素
定义 用于选择特定状态的元素 用于选择元素的特定部分或插入内容
语法 使用单冒号 (:) 使用双冒号 (::)
示例 :hover, :focus, :nth-child(n) ::before, ::after, ::first-line, ::first-letter
应用场景 根据用户交互或元素的结构状态改变样式 对元素的特定部分进行样式设置或插入内容
  • 伪类帮助我们根据元素的状态(如悬停、获得焦点等)来应用样式。
  • 伪元素则允许我们对元素的特定部分进行样式处理,或者在内容前后添加额外的内容。
相关推荐
街尾杂货店&3 分钟前
css word属性
前端·css
fruge2 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician3 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
demi_meng7 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20167 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20099 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔9 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼10 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder10 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔10 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js