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

Question

我有 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'   
}

Answer 1

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

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

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