在这个用html和css创建的简单网格中，我需要为每个方块创建一个悬停效果，但它占用了更多的方块。可能是包装器的问题，但我不确定为什么。
.wrapper {
width: 600px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
}
div div:hover {
background-color: slateblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<body>
<h1>Basic Grid with Hover Effect</h1>
<div class="wrapper">
<div class="row1">
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
</div>
<div class="row2">
<div id="id16"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id6"></div>
</div>
<div class="row3">
<div id="id15"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id7"></div>
</div>
<div class="row4">
<div id="id14"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id8"></div>
</div>
<div class="row5">
<div id="id13"></div>
<div id="id12"></div>
<div id="id11"></div>
<div id="id10"></div>
<div id="id9"></div>
</div>
</div>
</body>
</html>你有一个html，其中有3个层级，分别是 鸿沟
所以你的选择器 鸿沟 同时选择行和单元格。
我已经把你的行类改成了一个，以便能够使用它，并使选择器更加具体。
.wrapper {
width: 600px;
height: 600px;
}
.row div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.row div:hover {
background-color: slateblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<body>
<h1>Basic Grid with Hover Effect</h1>
<div class="wrapper">
<div class="row">
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
</div>
<div class="row">
<div id="id16"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id6"></div>
</div>
<div class="row">
<div id="id15"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id7"></div>
</div>
<div class="row">
<div id="id14"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id8"></div>
</div>
<div class="row">
<div id="id13"></div>
<div id="id12"></div>
<div id="id11"></div>
<div id="id10"></div>
<div id="id9"></div>
</div>
</div>
</body>
</html>确保关闭 head 标签。
我建议删除所有的 row 类，因为你在包装器中使用了 float，反正你的divs是对齐的。
类应该是统一的，而不是唯一的，在这段代码中，你使用的是 row-类，如 id
.wrapper {
width: 600px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
}
div div:hover {
background-color: slateblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Basic Grid with Hover Effect</h1>
<div class="wrapper">
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
<div id="id16"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id6"></div>
<div id="id15"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id7"></div>
<div id="id14"></div>
<div id="0"></div>
<div id="0"></div>
<div id="0"></div>
<div id="id8"></div>
<div id="id13"></div>
<div id="id12"></div>
<div id="id11"></div>
<div id="id10"></div>
<div id="id9"></div>
</div>
</body>
</html>