Css如何从以下位置进行转换：hover和normal，但在加载页面时更改值而不进行转换

基本上我有这个代码：

#测试{
颜色：白色；
过渡：所有1；
显示：内联；
}
#测试：悬停{
颜色：红色；
过渡：所有1；
}

它按预期工作。当我将鼠标悬停在文本上时，它会变为红色，然后当我停止将鼠标悬停在文本上时，它会变回白色。但问题是，由于默认设置为黑色，当页面在开始加载时，您会看到从黑色到白色的转换。我需要的是文本从一开始就是白色的，然后让所有的转换都正常工作

---

编辑：一切似乎都很好，问题只在局部出现，所以我想我只需要处理Chrome的怪异问题

设置

css

，它是

#test

的父项。因为HTML标签继承了他父母的CSS属性

父容器{ 颜色：白色； } #试验{ 颜色：白色； 过渡：所有1； 显示：内联； } #测试：悬停{ 颜色：红色； 过渡：所有1； }

你好

设置

测试的父项的
css
。因为HTML标签继承了他父母的CSS属性


父容器{
颜色：白色；
}
#试验{
颜色：白色；
过渡：所有1；
显示：内联；
}
#测试：悬停{
颜色：红色；
过渡：所有1；
}

你好

我克隆了您的回购协议，并设法在有限的场景中重现问题。在Chrome中（可能还有其他一些非Windows浏览器，我无法检查），当您直接在浏览器中打开

index.html

文件时，它不会在第一次绘制之前及时加载

头部的元素。这意味着CSS应用于页面太晚，将触发转换

解决方案是使用适当的开发服务器，这将为您带来许多额外的好处，如热重新加载，并且，正如本例中所要求的那样，提供一个真实的浏览器环境，在该环境中，资源被获取，而不是由文件系统直接链接。如果您使用的是VSCode，那么该插件是一个很好的工具，否则您可以安装简单的命令行工具，如webpack和rollup等捆绑工具的各种插件（如果您的项目使用这些工具）。
我克隆了您的repo，并设法在有限的场景中重现了问题。在Chrome中（可能还有其他一些非Windows浏览器，我无法检查），当您直接在浏览器中打开
index.html
文件时，它不会在第一次绘制之前及时加载
头部的元素。这意味着CSS应用于页面太晚，将触发转换

解决方案是使用适当的开发服务器，这将为您带来许多额外的好处，如热重新加载，并且，正如本例中所要求的那样，提供一个真实的浏览器环境，在该环境中，资源被获取，而不是由文件系统直接链接。如果您使用的是VSCode，那么插件是一个很好的工具，否则您可以安装简单的命令行工具，如webpack和rollup等捆绑工具的各种插件（如果您的项目使用这些工具）。
如果
test
是页面加载时元素的id，则不会发生转换。您的问题意味着您有一些JS控制选择器，您应该包含这些JS以获得完整答案。@劳伦斯·维特：不，我根本没有包含任何JS。如果
test
是元素的原始id-，则不应该从黑色转换为黑色。可能您的CSS加载得太晚了，即未加载到文档的
标题中
？如果没有一个更完整的代码示例，就无法提供更多的建议。@lawrence witt嗯，如果你仔细看，你会发现一切都很好。。。。。。。。但是如果我在本地查看index.html，那么我可以看到从黑到白的转换。。。。奇怪的在编辑代码时，这将是一个大问题，因为它在本地的行为不正确。如果
test
是页面加载上元素的id，则不会发生转换。您的问题意味着您有一些JS控制选择器，您应该包含这些JS以获得完整答案。@劳伦斯·维特：不，我根本没有包含任何JS。如果
test
是元素的原始id-，则不应该从黑色转换为黑色。可能您的CSS加载得太晚了，即未加载到文档的
标题中
？如果没有一个更完整的代码示例，就无法提供更多的建议。@lawrence witt嗯，如果你仔细看，你会发现一切都很好。。。。。。。。但是如果我在本地查看index.html，那么我可以看到从黑到白的转换。。。。奇怪的在编辑代码时，这将是一个大问题，因为它在本地的行为不正确。如果选择器定义了自己的相同类型的属性，则不会继承CSS属性。在您的示例中，将
#test
的
颜色设置为绿色，它将是绿色，而不是白色。根据问题，页面上的重新加载文本将从黑色变为白色。因为父对象的文本颜色为黑色，所以我建议调整以使父对象文本为白色。因此，当页面重新加载时，它不会显示从黑色到白色的转换。嗯，这似乎不起作用，但@lawrence witt说的是正确的。这个问题只在本地发生，而不是在你身上。请在你的本地测试我给出的，并让我知道。由于某些呈现和快速文件服务而导致本地出现问题。如果选择器定义了自己的相同类型的属性，则不会继承CSS属性。在您的示例中，将
#test
的
颜色设置为绿色，它将是绿色，而不是白色。根据问题，页面上的重新加载文本将从黑色变为白色。因为父对象的文本颜色为黑色，所以我建议调整以使父对象文本为白色。因此，它不会显示从黑色到白色的过渡