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  {

afaik，为id div分配css类是最佳做法。替代方案可能是以下选择器：

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

您选择div div个#id1属于id属性的兄弟姐妹的所有{{1}}个孩子。虽然它闻起来像是一些肮脏的黑客......

Answer 3

与逗号分开

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

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

3 个答案: