我怎样才能专门从CSS网格/子网格中“排除”一个元素，或者将其正确定位在嵌套网格的复杂纠缠中......

Question

* {
  outline: 1px solid rgba(255, 0, 0, .2);
}

ol {
  *:not(li) {
    grid-area: none;
    /* hmmm... this is not right*/
  }
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column: subgrid;
  li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    width: 100%;
  }
}

ol {
  counter-reset: Nr;
  *::before {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  >li {
    counter-increment: Nr;
    &::before {
      content: counter(Nr) ".";
      text-align: end;
      margin-right: 0.85rem;
    }
    >ol {
      counter-reset: lit;
      >li {
        counter-increment: lit;
        &::before {
          content: counter(lit, lower-latin)')';
        }
        >ol {
          counter-reset: sublit;
          >li {
            counter-increment: sublit;
            &::before {
              content: counter(sublit, lower-roman) '.';
            }
          }
        }
      }
    }
  }
}

<ol>
  <li>
    This is <strong>txt</strong> hi.
    <ol>
      <li>This li is not affected.</li>
    </ol>
  </li>
</ol>

我希望所有内联元素（例如示例中的

strong

）表现正常，并且不受任何网格/子网格布局的影响…此外，示例中

li

元素之后的所有内容都位于同一

strong

中也坏了。

到目前为止我所尝试的是操纵任何非 li 项目的显示属性和网格属性。我最新的方法是在代码中，旁边有注释。

它应该看起来像这样： [

但是片段输出是：

我为什么使用网格？我想最大限度地控制数字/项目符号的宽度、它们的“填充”（例如，将“数字列”中的可变/未知宽度数字精确居中）以及任何子列表的缩进范围。 .

例如：从左侧缩进应该正好是 1 厘米，同时将所使用的项目符号完美居中 + 将不同数字长度的数字与另一个数字正确对齐，并让任何子列表编号从其左边缘开始，恰好位于前一个 li 文本的位置开始...等等，所有这些都是同时进行的，并且具有精细的控制和最大的灵活性。

Answer 1

我会考虑使用浮动来实现相同的布局。我不认为 CSS 网格是正确的方法。

ol {
  padding: 0;
  list-style: none;
  overflow: hidden; /* this */
}

ol {
  counter-reset: Nr;
  *::before {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  li {
    counter-increment: Nr;
    clear: both; /* and this */
    &::before {
      content: counter(Nr) ".";
      text-align: end;
      margin-right: 0.85rem;
      /* and this */
      margin-bottom: 2px;
      float: left;
      /**/
    }
    ol {
      counter-reset: lit;
      li {
        counter-increment: lit;
        &::before {
          content: counter(lit, lower-latin)')';
        }
        ol {
          counter-reset: sublit;
          li {
            counter-increment: sublit;
            &::before {
              content: counter(sublit, lower-roman) '.';
            }
          }
        }
      }
    }
  }
}

<ol>
  <li>
    This is <strong>txt</strong> hi.
    <ol>
      <li>a <a href="">link</a> here.
          <ol>
            <li>a <a href="">link</a> here.</li>
            <li>This li is not affected.</li>     
          </ol>
      </li>
      <li>This <strong>li is not</strong> affected.</li>
      <li>This li is not affected.</li>
    </ol>
  </li>
  <li>This li is not affected.</li>
  <li>This li is not affected.</li>
</ol>