Question

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>

这样，我添加了一个脚本，问题就消失了。

Answer 1

第二个示例“工作” 和第一个示例“消失” 的原因是，您使用不同的CSS选择器添加过渡不是因为，您已包含脚本。

您的第一个示例具有第二个示例所没有的样式.test1.test2 {}。此选择器将覆盖选择器.test1 {}，因为它更具体，0020与0010。如果将第一个示例中的CSS添加到第二个示例中，则会得到相同的结果。

解决方案

不包括.test1.test2样式。

Answer 2

很难理解您想要什么，但是我认为您想拥有<div>绿色。因此，只需删除

.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>

CSS链接可以触发转换吗？

2 个答案:

解决方案