非继承属性，看着像继承一次 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 选择器，直接改写全局样式...神操作...

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

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