前端 CSS 面试题, 伪类

Step 1

Q:: 什么是CSS伪类？

A:: CSS伪类是应用于选择器的关键字，用于指定元素的特殊状态。它们可以在元素处于特定状态或满足特定条件时，动态地应用样式。例如，:hover伪类会在用户将鼠标悬停在元素上时生效。

Step 2

Q:: 举例说明常见的CSS伪类及其作用？

A:: 常见的CSS伪类包括： 1. :hover - 当用户将鼠标悬停在元素上时应用样式。 2. :focus - 当元素获得焦点时（如点击文本框）应用样式。 3. :nth-child(n) - 选择其父元素中指定序号的子元素。 4. :active - 当元素被激活（通常是被点击）时应用样式。 5. :visited - 针对用户访问过的链接应用样式。

Step 3

Q:: 伪类和伪元素的区别是什么？

A:: 伪类用于选择元素的特殊状态，而伪元素用于创建元素的一部分或内容。例如，:hover是伪类，而::before是伪元素，后者用于在元素的内容之前插入内容。伪类用一个冒号表示，如:focus，伪元素则用两个冒号表示，如::after。

Step 4

Q:: 如何使用 :nth-child() 和 :nth-of-type() 伪类？

A:: :nth-child() 伪类选择器匹配其父元素的第n个子元素，而不考虑元素类型。例如，li:nth-child(2)选择第二个li元素。:nth-of-type() 伪类选择器只匹配指定类型的第n个子元素，如p:nth-of-type(2)选择第二个p元素。

Step 5

Q:: 伪类 :not() 的作用是什么？

A:: :not() 伪类选择器用于选择不匹配给定选择器的元素。例如，:not(.example) 选择类名不是 'example' 的所有元素。它可以用于排除特定条件的元素，并应用不同的样式。