CSS Grid嵌套差异导致布局异常的原因咨询

核心差异来自选择器的优先级与作用范围，具体拆解如下：

1. 两组CSS的选择器编译后差异 #

第一组（嵌套写法） #

嵌套在.menu-vertical内的.with-icon-vertical，编译后是后代选择器：

.menu-vertical .with-icon-vertical {
  display: grid;
  justify-items: center;
  font-size: 12px;
}

它的优先级为0,2,0（两个类选择器），高于.menu-vertical a的优先级（0,1,1：一个类选择器+一个元素选择器）。

第二组（独立写法） #

独立的.with-icon-vertical是单纯的类选择器：

.with-icon-vertical {
  display: grid;
  justify-items: center;
  font-size: 12px;
}

它的优先级为0,1,0，低于.menu-vertical a的优先级（0,1,1）。

2. 优先级差异导致的布局变化 #

结合你的HTML结构（a标签同时拥有.with-icon-vertical类，且是.menu-vertical的后代元素）：

• 第一组效果：.menu-vertical .with-icon-vertical优先级更高，display: grid生效，a标签变成Grid容器。Grid默认单列布局，所以FontAwesome图标和文字会上下排列；同时justify-items: center让容器内内容水平居中，最终呈现图标在上、文字在下的居中垂直菜单。
• 第二组效果：.with-icon-vertical优先级更低，display: grid被.menu-vertical a的默认display: inline覆盖，a标签保持行内元素特性，图标和文字横向排列，且无居中对齐，呈现图标左、文字右的横向菜单样式。

附：两组代码与效果对比 #

第一组CSS代码 #

.menu-vertical {
  display: grid;
  gap: 16px;
  align-content: start;

  & a {
    padding: 8px 12px;
    border-radius: 8px;

    &.current {
      background-color: darkgrey;
    }
    &.hover {
      background-color: darkkhaki;
    }
  }
  .with-icon-vertical {
    display: grid;
    justify-items: center;
    font-size: 12px;
  }
}

第二组CSS代码 #

.menu-vertical {
  display: grid;
  gap: 16px;
  align-content: start;

  & a {
    padding: 8px 12px;
    border-radius: 8px;

    &.current {
      background-color: darkgrey;
    }
    &.hover {
      background-color: darkkhaki;
    }
  }
}

.with-icon-vertical {
  display: grid;
  justify-items: center;
  font-size: 12px;
}

对应的HTML代码 #

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="../assets/reset.css" />
        <link rel="stylesheet" href="../assets/base.css" />
        <link rel="stylesheet" href="style.css" />
        <link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
    </head>
    <body class="padding-small">
        <ul class="menu-vertical">
            <li><a href="" class="fa-solid fa-house   with-icon-vertical">Home</a></li>
            <li><a href="" class="fa-solid fa-map  with-icon-vertical current">Map</a></li>
            <li><a href="" class="fa-solid fa-location-dot  with-icon-vertical">Location</a></li>
            <li><a href="" class="fa-solid fa-heart with-icon-vertical">Reputation</a></li>
        </ul>
    </body>
</html>

内容的提问来源于stack exchange，提问作者john