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

一伪类（Pseudo-classes）

1 定义

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

2 常见伪类

:hover

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

a:hover {
    color: red;
}

:active

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

button:active {
    background-color: green;
}

:focus

当元素获得焦点时应用的样式（例如，输入框）。

input:focus {
    border: 2px solid blue;
}

:nth-child(n)

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

li:nth-child(2n) {
    background-color: lightgray;
}

:first-child

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

p:first-child {
    font-weight: bold;
}

:last-child

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

p:last-child {
    color: blue;
}

:not(selector)

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

div:not(.special) {
    background-color: yellow;
}

用法示例

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 常见伪元素

::before

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

p::before {
    content: "Notice: ";
    font-weight: bold;
}

::after

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

p::after {
    content: " Thank you!";
}

::first-line

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

p::first-line {
    font-weight: bold;
}

::first-letter

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

p::first-letter {
    font-size: 2em;
    color: red;
}

用法示例

<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
应用场景	根据用户交互或元素的结构状态改变样式	对元素的特定部分进行样式设置或插入内容