Flexbox中控制链接包裹的项：用类名替代a标签选择器

这个问题我太熟悉了——用元素选择器.container a确实容易在后续加新链接时搞混样式，换成类名.item来做核心控制，维护起来清爽多了！

首先得先明确你的HTML结构，假设目前是这样的：

<div class="container">
  <a href="/item1">
    <div class="item">商品1</div>
  </a>
  <a href="/item2">
    <div class="item">商品2</div>
  </a>
</div>

原来的CSS大概是：

.container a {
  flex: 1;
  padding: 1rem;
  background: #f5f5f5;
  text-decoration: none;
  color: #333;
}

下面给你两种靠谱的解决方案，优先推荐第一种：

方案一：调整HTML结构（最清晰，推荐） #

把a标签放到.item内部，让.item成为flex容器的直接子项——这样布局逻辑完全由.item掌控，a只负责跳转功能，职责分离，后续维护绝不会混淆：

<div class="container">
  <div class="item">
    <a href="/item1">商品1</a>
  </div>
  <div class="item">
    <a href="/item2">商品2</a>
  </div>
</div>

然后修改CSS，把原来给a的布局样式（flex、padding、背景等）移到.item上，a只保留文本相关样式：

/* 布局样式交给.item，完全和链接逻辑分离 */
.container .item {
  flex: 1;
  padding: 1rem;
  background: #f5f5f5;
}
/* 跳转链接的文本样式单独控制 */
.container .item a {
  text-decoration: none;
  color: #333;
  display: block; /* 让a占满整个.item，点击区域更大更友好 */
}

方案二：不修改HTML结构（兼容现有代码） #

如果没法调整HTML结构，那可以用两种方式处理：

子选择器关联（兼容性最好） #

给外层的a标签加一个专属类名（比如.item-link），把布局样式绑定到这个类上，内容样式交给.item：

<div class="container">
  <a href="/item1" class="item-link">
    <div class="item">商品1</div>
  </a>
  <a href="/item2" class="item-link">
    <div class="item">商品2</div>
  </a>
</div>

对应的CSS：

/* 布局样式用专属类控制，不会和其他a标签冲突 */
.container .item-link {
  flex: 1;
  display: block; /* 把a改成块级，确保flex布局正常生效 */
}
/* 内容样式完全由.item控制 */
.container .item {
  padding: 1rem;
  background: #f5f5f5;
  color: #333;
}
/* 链接文本样式单独处理 */
.container .item-link a {
  text-decoration: none;
}

用display: contents让.item成为flex子项 #

这个方法不需要改HTML，给a标签设置display: contents，浏览器会忽略a的存在，把.item当作flex容器的直接子项，就能直接用.item控制所有样式：

/* 让a标签“透明”，把.item暴露给flex容器 */
.container a {
  display: contents;
}
/* 现在可以直接用.item控制布局和样式了 */
.container .item {
  flex: 1;
  padding: 1rem;
  background: #f5f5f5;
}
.container .item a {
  text-decoration: none;
  color: #333;
  display: block;
}

注意：display: contents在现代浏览器都支持，但IE完全不兼容，如果你的项目不需要兼容IE，这个方法非常便捷。

总的来说，优先选方案一，结构清晰、职责明确；如果不能改结构，方案二的子选择器关联兼容性最好，display: contents适合现代浏览器环境。

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