CSS样式优先级与选择器详解
css（层叠样式表）的核心在于其“层叠”特性，即多个样式规则可以作用于同一个元素，并根据特定规则进行合并或覆盖。理解这些规则对于避免样式冲突至关重要。
-
选择器特异性（Specificity）： CSS引擎通过计算选择器的特异性来决定哪个样式规则更具优先级。特异性是一个数值，计算规则如下（从高到低）：
- 内联样式 (Inline Styles)：直接在HTML元素的style属性中定义的样式（例如 <img style="width:100px;">）。它们的特异性最高。
- ID 选择器：使用 # 符号选择元素（例如 #my-image）。
- 类选择器、属性选择器和伪类：使用 . 符号选择类（例如 .square-image），或 [attribute] 属性选择器，以及 :hover 等伪类。
- 元素选择器和伪元素：直接选择HTML元素（例如 img），或 ::before 等伪元素。
- 通配符选择器、组合器和否定伪类：例如 *、+、>、~、:not()，它们的特异性较低或不增加特异性。
当多个规则作用于同一元素时，特异性更高的规则将胜出。如果特异性相同，后定义的规则会覆盖先定义的规则。
!important 规则： !important 关键字可以强制一个样式声明具有最高优先级，甚至高于内联样式。然而，过度使用 !important 会破坏CSS的层叠机制，使调试和维护变得异常困难，因此应尽量避免。
在原始问题中，开发者在HTML中嵌入了多个 <style> 标签，并直接对 img 元素应用样式。由于 img 元素选择器会影响所有 img 标签，且内联 <style> 标签中的规则优先级可能高于外部样式表中的同等选择器，或者后续的 <style> 标签会覆盖前面的，导致样式难以预测和控制。
最佳实践：分离样式与内容
为了提高代码的可读性、可维护性和加载效率，强烈建议将所有CSS样式规则统一写入独立的 .css 文件中，并通过HTML文档头部的 <link> 标签引入。
优点包括：
立即学习“前端免费学习笔记（深入）”；
- 清晰分离：HTML文件专注于内容结构，CSS文件专注于样式，职责明确。
- 易于维护：修改样式只需编辑一个CSS文件，无需触及大量HTML文件。
- 提高性能：浏览器可以缓存CSS文件，减少页面加载时间。
- 避免冲突：集中管理样式有助于更好地规划选择器和优先级。
使用类选择器实现图片样式精细控制
要为不同的图片应用独特的样式，最有效的方法是使用类选择器。您可以定义通用的 img 样式作为所有图片的基础，然后创建特定的CSS类来覆盖或扩展这些基础样式。
实现步骤：
- 定义基础 img 样式：在外部CSS文件中，为所有 img 标签设置通用样式，如边框、内边距、图片适应方式等。
- 创建特定样式类：根据需求定义不同的CSS类，例如 .square-image 用于方形图片，.circular-image 用于圆形图片，.column-square 用于在列中填充并保持方形的图片。
- 在HTML中应用类：通过 class 属性将这些样式类应用到目标 <img> 标签上。
代码示例与重构
以下是基于原始问题和最佳实践重构后的CSS和HTML代码示例。我们将移除HTML中的所有内联 <style> 标签和 style 属性，将所有样式迁移到 styles.css 文件中，并利用类选择器实现精细控制。
styles.css (重构后的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 
