CSS进阶标签属性及案例

在CSS中，可以使用伪类和伪元素来增强选择器的功能，以下是一些常用的伪类和伪元素属性以及相关案例：

1. :first-child 选择器，选择父元素的第一个子元素：

p:first-child {
  color: red;
}

2. :last-child 选择器，选择父元素的最后一个子元素：

p:last-child {
  color: red;
}

3. :nth-child(n) 选择器，选择父元素的第n个子元素：

p:nth-child(2) {
  color: red;
}

4. :not(selector) 选择器，选择不匹配selector的元素：

p:not(:first-child) {
  color: red;
}

5. :empty 选择器，选择没有子元素（包括文本节点）的元素：

p:empty {
  display: none;
}

6. :target 伪类，选择当前活动的锚点元素：

p:target {
  color: red;
}

7. ::before 和 ::after 伪元素，在元素内容前后添加内容：

p::before {
  content: "前缀";
}
 
p::after {
  content: "后缀";
}

8. :enabled 和 :disabled 伪类，选择可用或不可用的表单元素：

input:enabled {
  border-color: blue;
}
 
input:disabled {
  border-color: grey;
}

9. :checked 伪类，选择被选中的表单元素：

input:checked {
  background-color: yellow;
}

10. :hover 伪类，选择鼠标悬停的元素：

p:hover {
  color: blue;
}

这些是CSS中常用的一些进阶选择器和伪类，可以根据需要进行组合使用以实现更复杂的样式效果。