在使用 CSS 樣式時，經(jīng)常會出現(xiàn)樣式不生效的情況，其中一種常見的問題就是水平線或下劃線出現(xiàn)但樣式不生效。

這種情況常見于使用 text-decoration 屬性進行下劃線設(shè)置時，CSS 樣式不會對其生效。

/* 下劃線設(shè)置 */
.underline {
text-decoration: underline;
}
/* 實際渲染時不出現(xiàn)下劃線 */
<p class="underline">Hello World</p>

造成這種情況的原因是用戶代理樣式表中對下劃線的默認(rèn)樣式設(shè)置。可以通過在樣式表中設(shè)置 text-decoration 屬性的 initial 值，來清除用戶代理樣式。另外，也可以通過將下劃線屬性設(shè)置為 none，再重新設(shè)置想要的下劃線樣式解決。

/* 清除用戶代理樣式 */
.underline {
text-decoration: underline;
text-decoration-color: initial;
text-decoration-style: initial;
text-decoration-line: initial;
}
/* 重新設(shè)置下劃線屬性 */
.my-underline {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: dashed;
text-decoration-line: underline;
}
<p class="my-underline">Hello World</p>

總結(jié)起來，當(dāng)我們遇到下劃線或水平線樣式不生效的情況時，需要先考慮是否存在用戶代理樣式的影響。此時可以清除用戶代理樣式或重新定義樣式屬性，重新設(shè)置想要的樣式效果。