Html 为什么我不能覆盖 div 的样式

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
}

.container div {
  width: 300px;
  height: 300px;
  background-color: #aaddaa;
  border-radius: 1rem;
}

.lanscape {
  width: 300px;
  height: 300px;
}

<main>
  <div class="container">
    <div class="img lanscape -L1">-L1</div>
    <div class="img lanscape -L2">-L2</div>
    <div class="img lanscape -L3">-L3</div>
    <div class="img portrait -P1"></div>
    <div class="img portrait -P2"></div>
    <div class="video landscape VL-1"></div>
    <div class="video portrait VP-1"></div>
    <div class="video portrait VP-2"></div>
    <div class="text T-1"></div>
    <div class="text T-2"></div>
    <div class="text T-3"></div>

  </div>

</main>

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
}

.container div {
  width: 300px;
  height: 300px;
  background-color: #aaddaa;
  border-radius: 1rem;
}

.container div.lanscape {
  background-color: red;
}

<div class="container">
  <div class="img lanscape -L1">-L1</div>
  <div class="img lanscape -L2">-L2</div>
  <div class="img lanscape -L3">-L3</div>
  <div class="img portrait -P1"></div>
  <div class="img portrait -P2"></div>
  <div class="video landscape VL-1"></div>
  <div class="video portrait VP-1"></div>
  <div class="video portrait VP-2"></div>
  <div class="text T-1"></div>
  <div class="text T-2"></div>
  <div class="text T-3"></div>

</div>

Html相关问答推荐

Flexbox嵌套div溢出

试图让三个Divs与下面的另外三个对齐

应用于文本而不是弹性容器的Flexbox属性

为什么在添加文本时网格区域会调整大小？

为什么不是所有字体好的图标都能与boostRapCDN一起使用呢？

如何使用HTML和css代码在vb.net上打印POS

窗口视图之外的下拉菜单位置

如何在排序上重用参数？

如何将内容元素放在侧边栏旁边？

如何在页面太短时使<；img&>缩小而不发生y溢出

如何制作'；在第'；页中搜索；是否发现多个元素中的单词？

UL 的行为就像它不属于任何类别

如何为高度较小的块制作边框动画？

用由文本制成的边框包围内容

显示填充正方形的图形的简单页面的 HTML 代码

获取 div 中每个元素的 href 并使用它

如何在 blazor 中单击单个按钮调用 2 个等待任务

我如何让这个动画播放，然后停止，然后在设定的时间后再次播放？ (CSS)

如何创建带有偏移边框线的双色边框？

尽管设置了 width：100% left：0，但居中对齐的 CSS 动画并不对称