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
应用场景 根据用户交互或元素的结构状态改变样式 对元素的特定部分进行样式设置或插入内容
  • 伪类帮助我们根据元素的状态(如悬停、获得焦点等)来应用样式。
  • 伪元素则允许我们对元素的特定部分进行样式处理,或者在内容前后添加额外的内容。
相关推荐
Freedom风间3 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军4 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军4 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪4 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer4 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu5 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风5 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发5 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中5 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron