蓝桥杯 web 新鲜的蔬菜（css3）

思路：

首先将.box容器设置为网格布局 display:grid;同时将网格分成3列3行

然后：通过子选择器或后代选择器选中相应的元素，再通过 grid-area 将其调整到相应的位置

答案：

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
#box1>.item {
  grid-area: 2 / 2;
}
#box2 .item:nth-child(2) {
  grid-area: 3 / 3;
}
#box3 .item:nth-child(2) {
  grid-area: 2 / 2;
}
#box3 .item:nth-child(3) {
  grid-area: 3 / 3;
}

1.网格布局

• grid-area 是一种非常灵活的方式，可以精确控制元素在网格中的位置。

2. #box1>.item（子选择器）

语法结构

• #box1：表示一个 ID 为 box1 的元素。
• >：这是子选择器 （child combinator），表示只选择 #box1 的直接子元素。
• .item：表示类名为 item 的元素。

完整含义

• #box1>.item 表示：在 ID 为 box1 的容器中，选择所有直接子元素 且类名为 item 的元素。
• 换句话说，这个选择器只会匹配那些直接嵌套在 #box1 内部 的 .item 元素，而不会匹配更深层次的嵌套元素。

3. #box2 .item:nth-child(2) （后代选择器）

语法结构

• 空格：这是一个后代选择器 （descendant combinator），表示选择 #box2 内部的所有符合条件的后代元素（包括直接子元素和间接嵌套的元素）。
• .item:nth-child(2)：
  • .item：表示类名为 item 的元素。
  • :nth-child(2)：表示该元素是其父元素的第二个子元素。

4.grid-area: 2 / 2;

• grid-area 用于指定一个元素在网格中的位置。语法是 row-start / column-start。
• 2 / 2 表示该元素从第 2 行、第 2 列开始，并且默认占据 1 行和 1 列的空间。