情況描述：
目前維護的老專案是通過 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 樣式的時候，加個選擇器前綴，將樣式的影響范圍限制下，不要造成全域樣式污染，這對后續專案維護會有很大的好處，減少不必要的麻煩
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270894.html
標籤：其他
下一篇：箭頭函式的副作用