定位 CSS 列布局中的特定列答案

【问题标题】：Target a specific column in a CSS Column Layout定位 CSS 列布局中的特定列
【发布时间】：2018-10-02 03:14:46
【问题描述】：

在 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 之类的东西或类似的伪选择器...

【问题讨论】：

我认为目前没有任何浏览器实现它们，但您正在寻找 CSS 选择器级别 4 的 grid-structural selectors。
如果想法是绘制不同的 bg-colors ，您可以使用 bg-gradient(update methode 类似于 faux-column 方法) ，对于文本，可以选择 mix-blend-mode .但这些都是普通的技巧，他们不选择任何东西。这是一个棘手的想法codepen.io/gc-nomade/pen/VGrdwL

标签： html css css-multicolumn-layout

【解决方案1】：

重点是添加额外的包装器，然后它们变成grid-items，来制作groups或columns 并能够使用适当的选择器定位它们：

基本示例：

.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>

【讨论】：