CSS复合选择器之链接伪类选择器及总结

/* 链接伪类选择器示例 */
a:link { color: blue; }     /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { color: red; }     /* 鼠标悬停时的链接 */
a:active { color: yellow; }  /* 链接被点击的状态 */
 
/* 复合选择器总结 */
/* 子元素选择器 */
.parent > .child { color: green; }
 
/* 同胞选择器 */
.sibling + .sibling { color: orange; }
 
/* 通用兄弟选择器 */
.sibling ~ .sibling { font-weight: bold; }
 
/* 分组选择器 */
h1, h2, h3 { text-align: center; }
 
/* 类选择器 */
.class-name { font-style: italic; }
 
/* ID选择器 */
#id-name { text-decoration: underline; }
 
/* 属性选择器 */
input[type="text"] { border: 1px solid black; }
 
/* 伪元素选择器 */
p::first-letter { font-size: 200%; }
 
/* 伪类选择器 */
input:focus { border-color: red; }

这段代码展示了链接的不同状态下的颜色变化，以及如何使用不同的CSS复合选择器来选择不同的元素。它提供了链接伪类选择器的基本用法，并且展示了如何用分组选择器同时选取多个标签，以及如何根据元素的类、ID、属性或伪元素和伪类来选择元素。