如何让嵌套在Anchor元素内的<div>中文本显示为普通样式？

要让<a>标签包裹的<div>里的文本呈现普通样式，直接用CSS覆盖浏览器默认的链接样式即可，具体操作如下：

• 针对目标文本（比如你的<h3>），设置与普通文本一致的颜色、取消下划线，同时可按需调整其他样式：

/* 重置a标签内所有文本的默认链接样式 */
.twoModels a {
  color: inherit; /* 继承父元素的文本颜色 */
  text-decoration: none; /* 去掉下划线 */
}

/* 单独对h3做精细样式调整（可选） */
.twoModels .first-model-text h3 {
  color: #333; /* 设置你需要的普通文本颜色 */
  /* 可添加字体大小、粗细等其他样式 */
}

• 注意：你的代码里把<button>嵌套在<a>标签内不符合HTML规范，按钮本身是可交互元素，嵌套会导致交互冲突，建议把按钮移出<a>标签，或用JS实现整体点击的同时保留按钮独立功能。

调整后的代码示例（结合CSS） #

HTML部分：

<section class="twoModels">
    <a href="#">
        <div class="first-model">
            <div class="first-model-photo">
                <img src="/img/first-model.jpg" alt="我们的大衣" title="我们的大衣" width="375" loading="lazy">
            </div>
            <div class="first-model-text">
                <h3>Dress Code: Maglieria</h3>
            </div>
        </div>    
    </a>
    <!-- 将按钮移到a标签外，避免交互冲突 -->
    <div class="first-model-cta">
        <button>了解更多</button>
    </div>
</section>

CSS部分：

.twoModels a {
  display: block; /* 让a标签覆盖整个div区域 */
  color: inherit;
  text-decoration: none;
}

.twoModels .first-model-text h3 {
  color: #222;
  font-weight: normal; /* 若需取消h3默认加粗可添加此属性 */
}

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