针对CSS列布局中的特定列

Question

在CSS列布局中，我需要针对第一列及其子列。

使用以下CSS代码：

.multi-column {
    @media (min-width: 768px) {
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;

        > li {
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
            overflow: hidden;
        }
    }
}

• 如何为第一列设置不同的background-color？
• 如何为上一列中的项设置不同的color？

我可能需要一些像:first-column或者类似的伪选择器.

Answer 1

重点是添加额外的包装器，这些包装器随后成为网格项，以生成组或列，并能够使用适当的选择器将其作为目标。

基本例子：

​

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  /* other grid props which you'd normally have for the container */
}

.grid-item:first-child {background: blue} /* or: ":nth-child(1)", ":first-of-type", ":nth-of-type(1)" */
.grid-item:last-child {color: blue} /* ":nth-child(...)", ":nth-of-type(...)" */

<div class="grid-container">
  <div class="grid-item">
    <div>1.1</div>
    <div>1.2</div>
    <div>1.3</div>
  </div>
  <div class="grid-item">
    <div>2.1</div>
    <div>2.2</div>
    <div>2.3</div>
  </div>
  <div class="grid-item">
    <div>3.1</div>
    <div>3.2</div>
    <div>3.3</div>
  </div>
</div>

​

当然，您可以避免这样做，并使用众多的选择器，但这并不是真正的最佳，没有其他方式的自动柜员机。也许:first-column或类似的东西有一天会出现……

如果用例合适，另一种方法是将grid-template-rows与grid-auto-flow: column和更具体的选择器结合起来。

​

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(-n + 3) {background: blue} /* selects first three */
.grid-item:nth-child(n + 7) {color: blue} /* selects all but the first 6 */

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

​

或者只使用grid-template-columns和默认的水平流

​

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(3n + 1) {background: blue} /* selects every third starting from the first  */
.grid-item:nth-child(3n + 3) {color: blue} /* selects every third */

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

​