与使用 repeat() 的网格中的行进行交互答案

【问题标题】：Interacting with rows from a grid that uses repeat()与使用 repeat() 的网格中的行进行交互
【发布时间】：2019-03-06 20:28:03
【问题描述】：

我有一个当前使用以下 CSS 生成的网格：

.tp-grid {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-gap: 15px;
align-items: center;
}

在 HTML 中，我生成的内容可能类似于以下示例：

<div class="tp-grid">
    <div>Alex</div>
    <div>19</div>
    <div>Male</div>
    <div>Programmer</div>
    <div>Honda Civic</div>
    <div>American</div>
    <div>Brown Hair</div>
    <div>Blue Eyes</div>
    <div>$50k/yr</div>
    <div>Married</div>
    <div>3 kids</div>
</div>

多亏了 CSS，所有这些信息都显示在一个网格行中。但是，如果我想要两行，HTML 可能看起来像这样：

<div class="tp-grid">
    <div>Alex</div>
    <div>19</div>
    <div>Male</div>
    <div>Programmer</div>
    <div>Honda Civic</div>
    <div>American</div>
    <div>Brown Hair</div>
    <div>Blue Eyes</div>
    <div>$50k/yr</div>
    <div>Married</div>
    <div>3 kids</div>
    <div>Ashley</div>
    <div>21</div>
    <div>Female</div>
    <div>DevOps</div>
    <div>Honda Accord</div>
    <div>Swedish</div>
    <div>Blonde Hair</div>
    <div>Gray Eyes</div>
    <div>$55k/yr</div>
    <div>Single</div>
    <div>0 kids</div>
</div>

在 CSS 中使用 repeat() 时，是否可以仅对特定行应用操作？现在我希望删除一行，以防我的问题过于宽泛。

【问题讨论】：

如果“应用操作”是指“使用 css 选择器定位特定行”，那么很遗憾，这是不可能的，请参阅 this link

标签： javascript jquery css css-grid

【解决方案1】：

您也许可以在 css 中使用 :nth-child() 选择器：

div.tp-grid div:nth-child(n+12):nth-child(-n+22){
    display:none;
}

查看此链接以获取有关掌握 :nth-child http://nthmaster.com/ 的更多信息

【讨论】：