html - 将相同的样式应用于多个子 div

Question

这是我的html

<div id="d1">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>

<div id="d2">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>

在 CSS 中，我有以下内容。

#id1 > div {
    border: 1px solid white;
    width: 100px;
    height: 50px;
    margin: 5px;
}

#id2 > div {
    border: 1px solid white;
    width: 100px;
    height: 50px;
    margin: 5px;
}

我想将它组合成以下值。

#id1 > div #id2 > div  {
    border: 1px solid white;
    width: 100px;
    height: 50px;
    margin: 5px;
}

但这不起作用。我可以添加一个类并应用于所有 8 个 div，但我想知道是否有更好的方法来完成这项工作。

Answer 1

试试这个：

#id1 > div, #id2 > div  {
    border: 1px solid white;
    width: 100px;
    height: 50px;
    margin: 5px;
}

多个 CSS 选择器应该用逗号分隔。

Answer 2

首先，您的选择器缺少逗号：

#id1 > div, #id2 > div  {

idafaik，为div分配一个 CSS 类将是最佳实践。另一种选择可能是以下选择器：

#id1 > div, #id1 ~ div[id] > div  {

你选择了所有具有运动属性的兄弟姐妹的div孩子。虽然闻起来像一些肮脏的黑客......div#id1id

Answer 3

用逗号分隔

#id1 > div, #id2 > div  {
border: 1px solid white;
width: 100px;
height: 50px;
margin: 5px;
}