一次 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 样式的时候，加个选择器前缀，将样式的影响范围限制下，不要形成全局样式污染，这对后续项目维护会有很大的好处，减小没必要要的麻烦