一次 outline 去除经验（非继承属性，看着像继承）

情况描述：

目前维护的老项目是通过 easyui 生成的 html，嵌套结构非常多，当点击元素后，会有个边框？？？非常影响页面美观，这是啥迷惑点击交互？？？

经验告诉我，这是 css 的 outline 属性带来的边框，而在 chrome 控制面板里该元素的 styles 列表中并没有设置 outline

我的开发经验告诉我，这个列表中会把所有设置过的、影响到此元素的 css 样式列出来，即使是设置到父级上的，然而我搜索 outline 他并没有出现，感觉像是默认继承似的？但定制过的继承样式也会出现在这个列表里呀...

并且我在给元素加上 outline: none 之后，“时而有效，时而无效”（比较内部的元素有效，外层一点的好像无效），看到页面效果的我一脸懵逼...这该咋去调？

分析探索之路：

经过一顿搜索，得知 outline 是非继承属性，故给元素加 outline: none 只对当前（css 选择器匹配到的）元素生效，即我在 chrome 控制台调试样式的时候顺手添加的 outline: none 只加在了当前元素上，内部（特别是与其大小位置一样的）元素的 outline 并没有重置到（并没有像“预期”的那样继承）

然而平时我写 span 标签进行交互的时候并没有发现其有 outline 边框，那这家伙哪来的？咋还这一片 dom 结构里都有这个 outline 边框呢？

点击触发？莫非这玩意儿和我平时处理调试 :hover 一样？要打个断点？这是哪个状态？:active、:hover、:visited 都不太像... :focus ？？？

最后通过 chrome 控制台，我给元素设置了 :focus 监听，然后样式栏里搜索，才看到有个范围这么大的样式设置在这儿...

:focus {

    outline: -webkit-focus-ring-color auto 1px;

}

难怪非继承属性 outline 会这么像继承？好家伙...，不加范围的 css 选择器，直接改写全局样式...神操作...

ps：看来还是对于 css 选择器掌握的不够啊...没有第一时间反应过来

解决问题：

既然问题找到了，那肯定要解决的啊！

重置回来吧！前辈或者框架写这个样式肯定也是有原因的，为了不影响全局，我们只改变确定不要 outline 边框这块的样式，给 css 选择器加个前提，框定下样式的影响范围，那么受这个范围控制的这一片就不会再出现多余的 outline 边框了...

/* 给自身及子元素的 focus 去掉 outline 外边框 */

#showLayerResult:focus,

#showLayerResult :focus {

    outline: none;

    /* outline: unset; */

}

补充：

1.当然，非必要情况不推荐处理这个 outline，详情可以看下这篇文章：页面可用性之outline轮廓外框的一些研究

2.我前面写在 element.style{...} 里的样式属于行内样式，计算下来的选择器权重比 :foucs 的权重高，所以顶掉了 :focus 选择器设置的 outline: -webkit-focus-ring-color auto 1px;，生效的是 outline: none

选择器权重可以了解下：CSS中选择器的权重值

3.希望大家写 css 样式的时候，加个选择器前缀，将样式的影响范围限制下，不要造成全局样式污染，这对后续项目维护会有很大的好处，减少不必要的麻烦