Javascript 我从数据库接收原始HTML，并在前端呈现它，然而，其中一个HTML类即使已应用，也不会执行任何操作

问题是，我从数据库中获取一些消息，并将它们发送到我的前端，以便呈现它们。消息如下所示：

<span class="emoji">
    <img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
</span>

<p v-html="message.message"></p>

<div class='message-container'>
    <div class="username-date-container">
        <p class='username'>Username</p>
        <p class='date'>Date</p>
    </div>
    <p>
        <span class="emoji">
            <img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
        </span>
    </p>
</div>

问题是，即使元素是使用.emoji类呈现的，该类的规则也不会应用。另外，当我在开发者控制台的右侧检查元素时，我看不到类或它的规则。奇怪的是，图像上的响应图像类工作得很好

令人惊讶的是，如果我像这样硬编码HTML：

<span class="emoji">
    <img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
</span>

<p v-html="message.message"></p>

<div class='message-container'>
    <div class="username-date-container">
        <p class='username'>Username</p>
        <p class='date'>Date</p>
    </div>
    <p>
        <span class="emoji">
            <img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
        </span>
    </p>
</div>

所有内容都得到了正确的呈现，表情类的规则也得到了应用。所以我不知道发生了什么

---

我假设这更像是一个CSS问题，其中存在一个CSS选择器，它具有更高的分数来覆盖span.emoji类，因此请再次尝试检查它，以查看CSS代码的哪个部分具有更高的选择特异性，或者简单地添加！对于.emoji样式查询很重要，仅当CSS文件的作用域为该特定HTML时，它才会影响其他组件的样式属性。

问题在于将作用域CSS与v-HTML一起使用。通过v-html注入的任何标记都被视为来自子组件。发件人：

使用v-html创建的DOM内容不受范围样式的影响，但您仍然可以使用深度选择器对其进行样式设置

如果您像在图片中一样检查浏览器开发人员工具中的元素，您将看到具有诸如data-v-2bc3d388等属性的元素，其中最后一部分可能有所不同。该属性将应用于模板为该特定组件创建的每个元素。但是，对于使用v-html插入的元素或由子组件创建的元素，它将不存在。因此，任何作用域CSS都不会应用于这些元素

您可以通过检查输出CSS来了解原因。在您的图片中，如果您在右侧查看，您将看到.message容器[data-v-2bc3d388]的一些规则。在右边，用灰色书写的是规则的来源，在这种情况下。如果你点击它，它将跳转到页面中的相关CSS，你可以自己看到输出的CSS。您应该看到，所有选择器都要求元素具有[data-v-2bc3d388]，而您的v-html元素则没有

至于为什么您的响应类工作正常，这还不完全清楚。我最好的猜测是，您已经在另一个文件中定义了相同的规则，但您忘记了对其进行范围限定，因此它已经泄漏出去，并且实际上是全局的。检查相关元素应允许您进行检查。您还可以尝试从当前组件中删除CSS，看看它是否有任何不同

有多种方法可以解决这个问题。您可以通过将该特定规则添加到全局CSS或向组件添加另一个未限定范围的标记来取消该规则的作用域

另一种解决方案是使用深度选择器，这与您想要设置子组件样式时所使用的方法相同：

.emoji {
    display: inline-block;
    width: 30px;
    height: 30px;
}
.responsive-image {
    width: 100%;
    height: 100%;
}

---

你能给我们看看页面上呈现的HTML吗？这就是问题所在，因此了解它会很有帮助。您是否使用范围CSS？@skille我使用范围CSS，但我呈现的HTML与CSS规则位于同一组件中。FluffyKitten，像拍控制台的照片吗？@FluffyKitten我添加了一个图像，如你在左边看到的，跨度确实有表情符号类，但是在右边，规则找不到。这很有意义，响应类位于我的App.js组件下，在这里我保存了我想从任何地方访问的所有类，它们不受范围限制。所以我得走了。我猜这里也有表情符号。@Bobimaru我更新了我的答案。如果需要，您可以移动.emoji规则，但如果该规则仅由这一个不必要的组件使用，则可以使用深度选择器。