CSS---复合选择器、元素显示模式和背景

/* 复合选择器示例 */
.container h1 {
  color: blue; /* 所有.container下的h1元素文本颜色为蓝色 */
}
 
.container .highlighted {
  background-color: yellow; /* 所有.container下的.highlighted类的背景颜色为黄色 */
}
 
/* 元素显示模式示例 */
.inline-element {
  display: inline; /* 将元素设置为行内元素 */
}
 
.block-element {
  display: block; /* 将元素设置为块级元素 */
}
 
.inline-block-element {
  display: inline-block; /* 将元素设置为行内块元素 */
}
 
/* 背景图片和颜色示例 */
.background-image {
  background-image: url('image.jpg'); /* 设置背景图片 */
  background-color: rgba(255, 255, 0, 0.5); /* 半透明白色背景 */
}
 
/* 伪类选择器示例 */
a:link {
  color: blue; /* 未访问链接颜色 */
}
 
a:visited {
  color: purple; /* 已访问链接颜色 */
}
 
a:hover {
  color: red; /* 鼠标悬停链接颜色 */
}
 
a:active {
  color: green; /* 链接被点击时的颜色 */
}

这段代码展示了如何使用CSS复合选择器来选择特定的HTML元素，如何更改它们的显示模式，如何设置背景图片和颜色，以及如何使用伪类选择器来改变超链接在不同状态下的颜色。