如何用CSS显示矩形？我的CSS矩形样式无法显示求助

你的矩形无法显示的核心问题是：HTML里没有添加对应CSS样式的元素——你写了.rectangle的样式规则，但整个HTML的<body>里只有<h1>和<script>标签，CSS找不到可以应用样式的对象，自然看不到矩形。

解决步骤： #

1. 在HTML的<body>中添加一个带有.rectangle类的元素，比如<div>：

修改后的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relightenment by Natalia</title>
    <link rel="stylesheet" href="relightenment.css">
</head>
<body>
    <h1> Relightenment </h1>
    <!-- 添加这个矩形元素 -->
    <div class="rectangle"></div>
    <script src ="relightenment.js"></script>
</body>
</html>

2. 如果你想用#rectangle（id选择器），只需要做两处修改：
   • CSS里把.rectangle改成#rectangle
   • HTML里把<div class="rectangle"></div>改成<div id="rectangle"></div>

这样修改后，你的矩形就能正常显示了。

内容的提问来源于stack exchange，提问作者Valeriia