css - 使用多个链式选择器

Question

我认为有一种方法可以同时修改这两个元素？我尝试过a b + a c，但似乎没有任何效果。

输入这个的最短方法是什么？

#a #b {
    width: 12px;
    height: 12px;
    background: url('xjpg');
    position: absolute;
    margin: 111px 0 0 222px;
}

#a #c {
    width: 12px;
    height: 12px;
    background: url('x.jpg');
    position: absolute;
    margin: 111px 0 0 333px;
}

Answer 1

#a #b, #a #c {
    width: 12px;
    height: 12px;
    background: url('x.jpg');
    position: absolute;
    margin: 111px 0 0 333px;
}

Answer 2

使用逗号将允许您将属性应用于多个选择器链，以及将相同的属性组合成一组属性并覆盖第二个元素的独特样式。

最合成的方式是：

#a #b, #a #c {
    width: 12px;
    height: 12px;
    background: url('xjpg');
    position: absolute;
    margin: 111px 0 0 222px;
}

#a #c {
    background: url('x.jpg');
    margin: 111px 0 0 333px;
}

确保覆盖属性低于原始元素属性。

Answer 3

comma允许您为一组规则指定多个选择器。

#a #b,  #a #c {
  width: 12px;
  height: 12px;
  background: url('xjpg');
  position: absolute;
  margin: 111px 0 0 222px;
}

Answer 4

#a #b, #a #c {
    width: 12px;
    height: 12px;
    position: absolute;
}
#a #b {
    background: url('xjpg');
    margin: 111px 0 0 222px;
}
#a #c {
    background: url('x.jpg');
    margin: 111px 0 0 333px;
}

或者

#a #b, #a #c {
    width: 12px;
    height: 12px;
    position: absolute;
    margin: 111px 0 0 222px;
}
#a #b {
    background: url('xjpg');
}
#a #c {
    background: url('x.jpg');
    margin-left: 333px;
}