css中有啥伪类选择器

CSS 中有很多伪类选择器，可以用来选择不同状态或位置的元素。以下是一些常用的伪类选择器：

- :hover ：鼠标悬停时的状态。
- :active ：鼠标按下时的状态。
- :focus ：元素获得焦点时的状态。
- :visited ：访问过的链接的状态。
- :first-child ：选择父元素下的第一个子元素。
- :last-child ：选择父元素下的最后一个子元素。
- :nth-child(n) ：选择父元素下的第 n 个子元素。
- :nth-of-type(n) ：选择父元素下第 n 个同类型子元素。
- :not(selector) ：选择不符合 selector 的元素。
- :empty ：选择没有子元素的元素。
- :enabled ：选择可用的表单元素。
- :disabled ：选择禁用的表单元素。

除了上述常用的伪类选择器，还有一些其他的伪类选择器，例如 :checked （选择被选中的表单元素）、:target（选择当前活动的锚点目标元素）等等。使用伪类选择器可以为页面添加更多的交互效果和样式。

相关问题

css中伪类选择器怎么写

在CSS中，伪类选择器使用冒号（:）来表示。以下是一些常见的伪类选择器的写法示例：

1. :hover：当鼠标悬停在元素上时触发。
2. :active：当元素被激活（例如被点击）时触发。
3. :focus：当元素获得焦点时触发。
4. :visited：选择已访问过的链接。
5. :first-child：选择父元素下的第一个子元素。
6. :last-child：选择父元素下的最后一个子元素。
7. :nth-child(n)：选择父元素下的第n个子元素。
8. :nth-of-type(n)：选择父元素下的第n个特定类型的子元素。

下面是一些示例代码，展示了如何使用伪类选择器：

/* 鼠标悬停时改变背景颜色 */
.button:hover {
  background-color: red;
}

/* 点击时改变按钮样式 */
.button:active {
  background-color: blue;
  color: white;
}

/* 输入框获取焦点时添加边框样式 */
.input:focus {
  border: 2px solid green;
}

/* 已访问过的链接改变颜色 */
a:visited {
  color: purple;
}

/* 每个列表项前添加一个圆点 */
li::before {
  content: "•";
  margin-right: 5px;
}

/* 选择父元素下的第三个子元素 */
.parent :nth-child(3) {
  color: orange;
}

这只是一些伪类选择器的示例，还有很多其他的伪类选择器可以用于不同的场景。你可以根据具体需求选择适合的伪类选择器来实现你想要的效果。

希望对你有所帮助！

css3结构化伪类选择器

CSS3中新增加的选择器之一是结构化伪类选择器，常用的结构化伪类选择器有：root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n)选择器、:empty选择器、:target选择器。其中，:nth-of-type(n)选择器和:nth-last-of-type(n)选择器可以根据元素在其父元素中的位置来选择元素，并且可以使用奇偶数等方式进行选择。例如，h2:nth-of-type(odd)表示选择父元素中第奇数个h2元素，而p:nth-last-of-type(2)表示选择父元素中倒数第二个p元素。