CSS图片样式精细控制：理解选择器优先级与最佳实践

/* 通用布局和文本样式 */
body {
  background-image: url("bg.jpg");
  margin: 0; /* 移除默认的body外边距 */
  font-family: sans-serif; /* 设置一个基础字体 */
}

h2, p {
  text-align: center;
}

.lulu {
  font-family: Copperplate, Papyrus, fantasy;
  text-align: center;
  font-weight: bolder;
}

/* 容器和列布局样式 */
.parent {
  background-color: lightgrey;
  width: 80%;
  margin: 0 auto; /* 水平居中 */
  height: 200px;
  padding: 20px 0; /* 增加一些内边距 */
  box-sizing: border-box; /* 确保内边距不增加宽度 */
}

.child-1 {
  background-color: lightgray;
  width: 73%;
  margin: 80px auto; /* 水平居中，设置上下外边距 */
  height: 900px; /* 示例高度，可能需要根据内容调整 */
  text-align: center;
  padding: 50px;
  box-sizing: border-box;
}

.child-1 p {
  color: white;
  padding: 50px 10px 0 10px;
  text-align: center;
  width: 80%;
  margin: 0 auto; /* 段落自身居中 */
}

.child-2 {
  background-color: aliceblue;
  width: 300px;
  float: right; /* 浮动到右侧 */
  height: 400px;
  margin: 50px;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}

.child-2 p {
  color: black;
  padding: 50px 10px 0 10px;
  text-align: left;
  width: 80%;
}

.row {
  display: flex; /* 使用 Flexbox 实现列布局 */
  justify-content: center; /* 居中列 */
  flex-wrap: wrap; /* 允许列换行 */
  margin-bottom: 20px; /* 增加行间距 */
}

.column {
  flex: 0 0 30%; /* 固定宽度30%，不伸缩 */
  max-width: 30%; /* 确保在小屏幕下不会过宽 */
  padding: 5px;
  box-sizing: border-box;
  text-align: center; /* 居中列内内容 */
}

/* 图片通用样式 */
img {
  border: 1px solid #ddd;
  padding: 5px;
  display: block; /* 使图片成为块级元素，便于使用 margin: auto 居中 */
  margin: 0 auto; /* 水平居中 */
  object-fit: cover; /* 确保图片裁剪以覆盖指定区域，避免拉伸 */
  border-radius: 2px; /* 默认轻微圆角 */
}

/* 特定图片样式类 */
.thumbnail-square { /* 针对 tumbnail.jpg */
  width: 100px;
  height: 100px;
  border-radius: 2px;
}

.circular-image { /* 针对 house.jpg, heart.jpg, feet.jpg */
  width: 100px;
  height: 100px;
  border-radius