Udacity交易卡片项目测试失败：卡片边框设置未被识别

嘿，我懂你这种明明视觉效果没问题，但测试就是卡壳的郁闷！咱们来拆解下问题，分分钟搞定它～

问题根源分析 #

你给自定义的.animal-whole容器加了边框，但Udacity的自动测试脚本是按预设的元素规则来检测的——它大概率在找带有card类或特定id的卡片容器，而不是你自己命名的animal-whole。从你的代码结构看，内部的<div id="card" class="animal-info">只是信息区域的卡片，测试真正要求的是包裹标题、图片、所有内容的外层大容器要带边框。

两种可行解决方案 #

方案1：让容器类名匹配测试要求

把外层容器的类改成card（或者保留animal-whole同时新增card类），让测试脚本能精准识别到它：

<!-- 二选一都可以 -->
<div class="card">
<!-- 或者 <div class="animal-whole card"> -->
  <!-- 内部的标题、图片、信息区等内容保持不变 -->
</div>

然后在CSS里给.card加上边框样式：

.card {
  border: 1px solid gray;
}

方案2：调整测试目标元素的边框（如果测试盯的是#card）

要是测试要求的是内部#card元素带边框，直接给这个id设置样式就行（你已经给.animal-info加了边框，但测试可能优先识别id选择器）：

#card {
  border: 1px solid gray;
}

额外小细节优化 #

• 你HTML里的图片alt写的是"dog"，但图片内容是翠鸟，这个小细节改过来能避免项目细节扣分～
• CSS里重复设置了#imgId的样式，可以合并成一段更整洁：

#imgId {
  width: 300px;
  padding: 5px;
}

内容的提问来源于stack exchange，提问作者Developer