css 更少的预处理器

Question

我刚开始使用 less 并尝试在一些简单的盒子上工作以获得更好的理解。有 4 个不同颜色和大小的盒子，但是在 div:nth-child(2) 上它总是创建两个盒子。我怎样才能把它弄成一个盒子？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Preprocessors</title>
    <link rel="stylesheet" href="less/style.css">
</head>
<body>
<nav>Navigation Bar</nav>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<footer>Footer</footer>
</body>
</html>

*{
  margin: 0;
}

html{
  background-color: @mainColor;

}

.container {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

  div:nth-child(1){
    .boxes(@box1Color, 100px)
  }

  div:nth-child(2){
    .boxes(@box2Color, 200px)
  }

  div:nth-child(3){
    .boxes(@box3Color, 250px)
  }

  div:nth-child(4){
    .boxes(@box4Color, 50px)
  }

使用容器但没有第二个第 n 个子项时，页面看起来完全没问题，但是当添加第二个框时，所有内容都压缩了，一个大框位于常规框后面

.boxes(@color, @wh){
  border-radius: 8px;
  border: solid black 2px;
  background-color: @color;
  height: @wh;
  width: @wh;
}

boxes in question

Answer 1

而不是这个选择器...

div:nth-child(2){
 .boxes(@box2Color, 200px)
}

...你应该更具体一些，因为这将适用于所有 DIV，它们是 anything[=36] 的第二个 child =] 否则。

在组合选择器中使用 parent 容器的 class 将选择限制为该容器的 children，如下所示：

div.container > div:nth-child(2){ .boxes(@box2Color, 200px) }

与其他 children 类似。

在 LESS 中，您还可以将其（以及您的其他 child-selector 规则）写为

div.container { &>div:nth-child(1){ .boxes(@box1Color, 100px) } &>div:nth-child(2){ .boxes(@box2Color, 200px) } &>div:nth-child(3){ .boxes(@box3Color, 250px) } &>div:nth-child(4){ .boxes(@box4Color, 50px) } }

P.S.：实际上，代码中的主要错误是您在设置之后直接关闭 .container 的规则，而不是移动右括号 (}) 在 child divs 的规则之后。

My 上面的 LESS 代码也使用 direct child 选择器 > 与 children.
规则中 parent 的 & 占位符相结合

css 更少的预处理器

css preprocessors with less

css

css-selectors

less