css代码中的css代码编写代码

Question

如何在css中嵌套代码？

“工作守则”(例如)：

.component--search{
  background: #3D3F43;
  border-radius: 15px;
  padding: 40px 45px;
  box-shadow: 0 15px 25px -20px #202125;

  .form {
    position: relative;
    margin-bottom: 30px;

    .search-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 53px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 }
}

代码不起作用：

.front{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            .box1{
                background: red;
                border: 1px solid #000;
            }

        }

有什么关系呢？为什么我写的第二部分不起作用？我的英语很差。如果我没有详细解释这个问题，很抱歉。

Answer 1

第二个代码块在sass或更少的代码块中工作，但在css中不起作用。

因此，在css中，您必须这样做：

.front {
    width: 600px;
    height: 600px;
    border: 1px solid #000;
}

.front .box1 {
    background: red;
    border: 1px solid #000;
}