<head>
<title>Learn Coding Online | Treehouse</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
</head>我使用HTML和CSS创建了一个网页。每当我单击页面中的任意位置时，所有元素都会转到随机位置，当我释放单击时，它们会再次变得正常。我已经附上了代码片段，它看起来完全没问题。为了看到问题，我提供了网站链接 https://whitiger26.github.io/try2/
有人可以指出这背后的原因吗？
提前谢谢。
附言-我是新来的，所以请忽略错误。
.subm ul li a:hover, .subm ul li a:active{ /* This line is changed */
padding-left: 85.6px;
padding-right: 85.6px;
padding-bottom: 27px;
border-bottom: 3px solid #387bab;
color: #387BAB;
}
.subm ul li a:hover, :active它基本上选择了两个元素.subm ul li a:hover和*:active，因此，它会在单击时选择该页面中的所有元素，并在它们上应用该CSS代码。
好的，我想出了你的问题。
在你的"样式表.css"中，你有这样的代码：
.subm ul li a:hover,:active{
padding-left: 85.6px;
padding-right: 85.6px;
padding-bottom: 27px;
border-bottom: 3px solid #387bab;
color: #387BAB;
}
您需要删除, :active因为在 css 中，您拥有它的方式，当"活动"时，它实际上需要任何东西。这就是为什么您的点击所有问题会改变一切。
从悬停和活动中删除相同的样式。
.input:active{
border: 2px solid rgb(136, 135, 135);
}
.subm ul li a{
border-bottom: 3px solid transparent;
}
.subm ul li a{
border-bottom: 3px solid transparent;
}
.subm ul li a:hover, .subm ul li a:active{
border-bottom: 3px solid #387bab;
color: #387BAB;
}