无法为包裹Anchor标签的dreams-anchor-wrap div添加CSS样式

首先可以明确：不存在div包裹a标签就无法为外层div设置CSS属性的规则，这是完全符合HTML语法规范的写法，样式不生效可以按照以下方向排查：

• 选择器匹配错误
  如果你是通过类名匹配该元素，要确认CSS选择器加了类选择器前缀.，正确写法为.dreams-anchor-wrap，漏写前缀会导致选择器完全无法命中目标元素。
• 样式优先级被覆盖
  可以打开浏览器开发者工具的「元素」面板，选中该div查看生效样式列表，如果你写的边框样式被划掉，说明存在权重更高的规则覆盖了你的样式，比如ID选择器、行内样式、带!important标识的其他同名规则，调整优先级即可解决。
• 元素尺寸为0导致边框不可见
  如果div没有设置宽高，同时内部的a标签设置了float: left或者position: absolute等脱离文档流的属性，会导致外层div高度塌陷为0，边框自然无法显示，可以给外层div加overflow: hidden或者清除浮动的属性解决。
• CSS文件加载失败
  如果样式写在单独的CSS文件中，确认文件引入路径正确，没有404加载失败的问题。

你可以参考以下合法示例代码：

<!-- HTML结构 -->
<div class="dreams-anchor-wrap">
  <a href="/test">跳转链接</a>
</div>

/* 对应CSS样式 */
.dreams-anchor-wrap {
  border: 3px solid #2385bb;
  padding: 10px;
}

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