我得到了這個 HTML：
<div class="row">
<div class="col-lg-6">
**<h1 id="primerbeneficio">Conoce a tu <span>lomito<span/> ideal</h1>**
<button id="descargaapple" type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa- apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" class="title-image" alt="iphone-mockup">
</div>
</div>
而我只是想修改“lomito”這個詞，但在我的頁面中也被影響到下一個具有相同樣式的詞“ideal”。
控制臺顯示：
看起來，另一個跨度標簽涉及這兩個詞，并且“理想”以某種方式從 h1 繼承。但顯然我的 html 并不打算這樣做。
我得到了帶有 CDN 的 bootstrap 5，但這應該不是問題，不是嗎？
我已經嘗試過更改 html，但它不能比這更進一步，我的意思是，它只是一個標簽..
uj5u.com熱心網友回復：
您在以下行中有錯字，導致span標簽無法正確關閉：
**<h1 id="primerbeneficio">Conoce a tu <span>lomito<span/> ideal</h1>**
應該是這樣的：
<h1 id="primerbeneficio">Conoce a tu <span>lomito **</span>** ideal</h1>
enter code here
注意它在哪里/。在您的原始標記中，因為span“Lomito”一詞周圍的標簽沒有正確關閉。因此，瀏覽器將您的錯字解釋為另一個<span>標簽，然后將其封閉在“理想”一詞周圍，然后瀏覽器<span>將“ Lomito”一詞之前的原始標簽封閉。
修正錯字，它應該會按照您的預期顯示。
另外，我強烈建議您使用可以安裝擴展的編輯器來獲得自動關閉標簽的編輯器。如果您這樣做，您將來會避免這些型別的問題。
uj5u.com熱心網友回復：
首先，您的目標是 h1 內的所有跨度
您可能正在尋找>后代選擇器 （空格）上的直接子選擇器。
您的 CSS 選擇器將從 更改h1 span為h1>span
其次，font-style是繼承財產
這意味著您設定了字體樣式的元素的任何后代都將繼承相同的字體樣式，即使您的目標是直接子代。
所以最好的解決方案是重新設計有問題的跨度，你可以這樣做：
.lomito span {
font-style: revert;
}
revert 是瀏覽器的默認元素樣式，您也可以使用 initial 作為默認屬性值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/454383.html