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
应用场景 根据用户交互或元素的结构状态改变样式 对元素的特定部分进行样式设置或插入内容
  • 伪类帮助我们根据元素的状态(如悬停、获得焦点等)来应用样式。
  • 伪元素则允许我们对元素的特定部分进行样式处理,或者在内容前后添加额外的内容。
相关推荐
前端Hardy2 分钟前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼13 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍14 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰1 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区1 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1111 小时前
web服务代理用它,还不够吗?
前端
Liamhuo2 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_2 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js