当前位置：首页 > news >正文

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

news 来源：原创 2025/6/10 17:03:11

思路：

首先将.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;