为什么文本内容会继承先前 span 标签的 CSS？

Question

我知道了 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”。

控制台显示如下：

看起来，另一个 span 标签包含这两个词，“ideal”以某种方式继承自 h1.. 但显然我的 html 不打算那样做。

我通过 CDN 获得了 bootstrap 5，但这应该不是问题，是吗？

我已经尝试更改 html，但它不能比这更进一步，我的意思是，它只是一个标签..

Answer 1

首先，您要定位 h1 内的所有跨度

您可能正在寻找直接子选择器 > 而不是后代选择器 (space)。

您的 CSS 选择器将从 h1 span 更改为 h1>span

其次，font-style是继承的属性

这意味着您设置了字体样式的元素的任何后代都将继承相同的字体样式，即使您定位的是直接子元素也是如此。

所以最好的解决办法就是重新设计有问题的跨度，你可以这样做：

.lomito span {
  font-style: revert;
}

revert 是您浏览器的默认元素样式，您也可以使用 initial 作为默认值属性 value

Answer 2

您在以下行中有错字，导致 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

注意 / 在哪里。在您的原始标记中，因为单词“Lomito”周围的 span 标记未正确关闭。所以你的错字被浏览器解释为另一个 <span> 标签，然后它关闭了单词“Ideal”，然后浏览器关闭了单词“Lomito”之前的原始 <span> .

修正拼写错误，它应该会按照您的预期显示。

此外，我强烈建议您使用可以安装扩展的编辑器来获得 auto-closes 标签。如果这样做，您将来会避免这些类型的问题。

为什么文本内容会继承先前 span 标签的 CSS？

Why does a text content inherit the CSS from a previous span tag?

html

css

inheritance