如何选择每两个/三个子元素或兄弟元素并应用样式？答案

【问题标题】：How to select every two / three children or sibling elements and apply styling?如何选择每两个/三个子元素或兄弟元素并应用样式？
【发布时间】：2020-09-23 09:06:33
【问题描述】：

我有 10 个孩子的 div。我想将display: 'flex' 和flex-direction: 'row' 应用于父div 的每两个孩子。但目前要这样做，我必须进一步将两个 div 放在一个单独的 div 中并进行样式设置。是否有我不创建class='flex-row' 的方法或伪类。谢谢。

<div>
    <div class='flex-row'>
        <div>A</div>
        <div>B</div>
    </div>
    <div class='flex-row'>
        <div>C</div>
        <div>D</div>
    </div>
    <div class='flex-row'>
        <div>E</div>
        <div>F</div>
    </div>
    <div class='flex-row'>
        <div>G</div>
        <div>H</div>
    </div>
    <div class='flex-row'>
        <div>I</div>
        <div>J</div>
    </div>
</div>

.flex-row {
display: flex;
flex-direction: 'row'   
}

【问题讨论】：

你能解释一下'每两个孩子'是什么意思吗 - 从你的 HTML 看起来好像你正在将 flex-row 应用于顶部 div 的每个孩子。另外，插入似乎没有任何样式的 div（例如
A

B
）的目的是什么？
我正在应用 flex: row on two by two children。就像 div A、div B. 然后是 div C 和 div D. div A、div B 将在同一行。 div C 和 div D 在行下方单独的新行中。
您正在对父 div 的每个子元素应用 flex:row，div A 和 B 在行内。所以..你想知道什么？你想应用 flex-row 而不必应用类？

标签： html css reactjs bootstrap-4 sass

【解决方案1】：

试试这个： yourDivClass.nth-child(3n) {}

这将选择 div 的每三个子元素

【讨论】：

【解决方案2】：

我不确定我完全理解你想要什么，也许是这个？这会将 flex 和 row 应用于“maindiv”的所有直接子级

.maindiv > div {
  display: flex;
  flex-direction: row;
}

<div class="maindiv">
    <div>
        <div>A</div>
        <div>B</div>
    </div>
    <div>
        <div>C</div>
        <div>D</div>
    </div>
    <div>
        <div>E</div>
        <div>F</div>
    </div>
    <div>
        <div>G</div>
        <div>H</div>
    </div>
    <div>
        <div>I</div>
        <div>J</div>
    </div>
</div>

【讨论】：