如何为多个div类统一设置CSS样式并为指定类添加边框

原代码存在的核心问题 #

1. HTML类名与标签错误

   • 类名不能用空格表示“带编号的类”，空格意味着元素同时拥有多个独立类（比如class="box 1"表示元素有box和1两个类）；且类名以数字开头会增加CSS选择复杂度，建议改为box-1、box-2这类规范命名。
   • 最后一个<div class="box">/div>的闭合标签错误，应改为</div>。

2. CSS选择器错误

   • .landing page是后代选择器，会匹配.landing元素下的page标签，但目标是选中同时拥有landing和page类的div，需使用.landing.page（无空格的多类选择器）。
   • .box 1, box 2, box 3写法完全错误，既遗漏了类选择器的.符号，也未正确匹配多类元素，正确的多类选择器应为.box.box-1。

修正后的完整代码方案 #

方案一：用编号类区分特殊元素

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="landing page">
        <div class="box box-1"></div>
        <div class="box box-2"></div>
        <div class="box box-3"></div>
        <div class="box box-4"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.landing.page {
    width: 100%;
    height: 100vh;
}

/* 给所有带box类的div设置统一样式 */
.box {
    width: 30%;
    height: 15vh;
    margin: 2px;
    background-color: #eee; /* 加背景色方便查看效果 */
}

/* 给指定的box添加黄色边框 */
.box.box-1, .box.box-2 {
    border: 2px solid yellow;
}

方案二：用通用标记类区分特殊元素（更灵活）

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="landing page">
        <div class="box highlight"></div>
        <div class="box highlight"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.landing.page {
    width: 100%;
    height: 100vh;
}

.box {
    width: 30%;
    height: 15vh;
    margin: 2px;
    background-color: #eee;
}

/* 给带highlight类的box添加黄色边框 */
.box.highlight {
    border: 2px solid yellow;
}

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