css - 排除元素为 :not in grid layout

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>