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
应用场景 根据用户交互或元素的结构状态改变样式 对元素的特定部分进行样式设置或插入内容
  • 伪类帮助我们根据元素的状态(如悬停、获得焦点等)来应用样式。
  • 伪元素则允许我们对元素的特定部分进行样式处理,或者在内容前后添加额外的内容。
相关推荐
zhougl99635 分钟前
html处理Base文件流
linux·前端·html
花花鱼39 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_42 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法