如何访问<a>标签内的<img>标签并为其设置焦点（含IE兼容）

解决标签内元素的焦点设置问题 #

嘿，我来帮你搞定这个焦点样式的问题！

首先得搞清楚为什么你原来的CSS选择器不生效：默认情况下，<img>元素是不可聚焦的，所以:focus伪类根本不会触发它，哪怕它嵌套在<a>标签里也没用。而你给<a>加类后生效的是<a>元素的焦点，不是<img>的，这就是尺寸不匹配问题的根源。

下面是具体的解决方案：

步骤1：让<img>变成可聚焦元素 #

给<img>添加tabindex="0"属性，这样它就可以被聚焦了（既支持Tab键导航聚焦，也支持点击聚焦，符合无障碍设计规范）：

<a href='#'>
  <img class="img1" src="abc.png" tabindex="0" />
</a>

如果只想要点击聚焦、不想让Tab键导航到它，可以把tabindex设为-1。

步骤2：编写正确的CSS焦点样式 #

现在<img>可以被聚焦了，直接用下面的选择器就能给它设置焦点样式：

.img1:focus {
  /* 替换成你需要的焦点样式，比如： */
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

如果你想更精准地限定是<a>标签内的.img1，也可以用：

a > .img1:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

这样设置后，当<img>获得焦点时，样式就会精准地应用在它本身，不会受<a>标签尺寸的影响啦！

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