如何设置多个 div 类的样式答案

【问题标题】：How to style multiple div classes如何设置多个 div 类的样式
【发布时间】：2022-11-26 17:08:41
【问题描述】：

我正在寻找如何通过为 CSS 上的多个 div 类提供相同的宽度、高度和边距来将单一样式应用到它们

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 1"></div>
  <div class="box 2"></div>
  <div class="box 3"></div>
  <div class="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 1, box 2, box 3{
   width: 30%;
   height: 15vh;
   margin: 2px;
  }

但我还想通过添加 2px 黄色边框向 CSS 中的两个 div 类添加样式，以便它们从 d rest 中脱颖而出。例如

CSS

.box1 .boxes{
     border: 2px yellow solid;
   }

【问题讨论】：

我没看懂你的第二个问题

标签： html css

【解决方案1】：

从类名中删除空格，否则它们将被视为单独的类。

/* All elements with class="box" */
.box {
  background: pink;
  height: 100px;
  width: 100px;
  margin: 2px;
}

.box1 {
  border: 2px yellow solid;
}

<div class="landingpage">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：

【解决方案2】：

将相同的类添加到所有div

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">/div>

并以这种方式设计它们

.box {
  // your styles
}

如果你想给特定的 div 添加黄色边框，只需为其创建一个类即可。

<div class="box yellow-border">/div>

在 CSS 中

.yellow-border {
    border: 2px yellow solid;
}

【讨论】：

【解决方案3】：

做你想做的事，你可以像那样使用 :nth-child() 属性（我已经对代码进行了评论，这样你就可以理解了）。

你可以去那个网站了解更多：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child。

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

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

 .box{
   width: 30%;
   height: 15vh;
   margin: 2px;
   background-color:black;
   
  }
  
/* Will affect the element 3 */
.box:nth-child(3){
     border: 2px yellow solid;
}

/* Will affect the element 5 and all following elements 3 */
.box:nth-child(n+5){
     border: 2px yellow solid;
}

<!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"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 </div>
</body>
</html>

【讨论】：