雖然只是一個小問題，但這個解決問題的過程也深化了自己對盒子模型的理解

問題緣起

正在寫一個登錄注冊的小窗口，想要在鼠標懸浮階段讓按鈕和文字都變色，但是發現實操的時候按鈕和文字沒辦法同時變色

問題分析

仔細分析了下該模板的代碼塊：

 <a href="#" class="btn-main" @click.prevent="onSubmit"><span></span><span></span><span></span><span></span><strong>登錄</strong>
</a>
<a href="#" class="btn-main"><span></span><span></span><span></span><span></span><strong>注冊</strong>
</a>

然后再查看樣式代碼：

.btn-main {position: relative;display: inline-block;padding: 10px 20px;color: #fff !important;background-color: #000;font-size: 16px;text-decoration: none;text-transform: uppercase;background: transparent;border: none;overflow: hidden;transition: background 0.3s, color 0.3s;font-family: "SimSun";letter-spacing: 4px;border-radius: 5px;
}
.btn-main strong {color: #fff !important;
}//解決和main.css的樣式沖突
.btn-main:hover {background: #fff;color: #212931;
}

可以看到，在鼠標懸浮到時候，只是改變了<a>的樣式，并沒有改變其中子塊<strong></strong>的樣式：

問題解決

需要在hover的同時同步修改strong子塊的樣式，可以增加代碼如下：

.btn-main:hover strong {color: #212931 !important;
}

問題得到解決：懸浮后能同步修改塊內顏色

debug思路總結

1. 通過網頁開發者工具，獲得某個塊的線索（比如顏色可能為#212931）
2. 根據線索，明確嵌套結構以及可能存在沖突的css文件
3. 對與css沖突，可以用!important提高優先級
4. 對于找到的塊，使用hover+塊類別的形式解決

進一步思考

如果作以下修改：

.btn-main strong:hover{color: #212931 !important;
}

呈現效果會有什么不同？