排除网格布局中带有 :not 的元素

Question

我有一个页面，我只能修改css。我尝试实现 2 列布局并从网格布局中排除一个元素。这是html和我的css的示例：

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>
.container:not(hr) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

如何排除 hr 元素？

Answer 1

您需要选择"所有直接子元素"，如下所示：

(添加了边框，以便您可以看到布局的div(

.container > *:not(hr) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dotted pink;
}

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>

Answer 2

对心率使用"职位：绝对">

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dotted pink;
}
hr {
  position: absolute;
}

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>