2个简单的html和css文件
/*main.css*/
.test1.test2 {
background-color: red;
}<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./main.css">
<style>
.test1{
background-color: green;
transition: 2s
}
</style>
</head>
<body>
<div class="test1 test2" style="height: 100vh">TEST</div>
</body>
</html>但是当我在浏览器中打开它时，转换出现了(从绿色到红色)。更让我困惑的是，当我添加一个脚本时，问题就消失了。
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./main.css">
<!--Add a script, or a script link-->
<script src="1.js"></script>
<style>
.test1{
background-color: green;
transition: 2s
}
</style>
</head>
<body>
<div class="test1 test2" style="height: 100vh">TEST</div>
</body>
</html>最佳答案
与第一个示例相比，您的第二个示例“有效” 和问题“消失” 的原因是因为您使用不同的 CSS 选择器来添加过渡，不是因为您包含了一个脚本。
您的第一个示例具有第二个示例没有的样式 .test1.test2 {}。此选择器覆盖了选择器 .test1 {}，因为它更具体，0020 与 0010 相比。如果将第一个示例中的 CSS 添加到第二个示例中，您会得到相同的结果。
解决方案
不要包含 .test1.test2 样式。
关于css链接能触发transition吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53853903/