4.7 列表选择器

术语说明。本教程的“列表选择器”对应CSS3的“selector list选择器列表”，对应CSS2的“分组选择器group”。

列表选择器定义

A,B{/*样式定义*/}

多个选择器用逗号隔开，表示同时为A、B设置样式，同理可加入C、D、E。等价下列代码，实现代码重用。

A{/*样式定义*/} 
B{/*样式定义*/}

需求场景：已有class1与class2分别设置独立样式，再同时为它们增加相同样式。选择结果：第1、2、11、13段。

分析：如果在class1与class2内部分别添加样式，出现代码重复、以后修改要修改多处。因此需要一种在多个选择器表达“与”逻辑的机制，形成新的选择器，即列表选择器。

        .class1 , .class2{
            border: 1px solid #999;
            color: #0aaa76;
        }

试一试。将A、B换成其它简单选择器。

列表选择器的嵌套。

形式示例

A B>C>D+E,G~H{/*样式定义*/}

实际示例。同时使用后代选择器、子元素选择器与列表选择器。

        .div1  .div2 > .class1 , .class2{
            border: 1px solid #999;
            color: #0aaa76;
        }

最终结果选中“第2段”、“第11段”、“第13段”。