selector-1, selector-2 { property: value; }
使用逗号将多个选择器组合在一起,可以同时选择多个元素,并对它们应用相同的样式。例如:
h1, h2, h3 { color: red; }
上述代码将同时选择所有的h1、h2、h3标签,并将它们变为红色。
使用空格将选择器进行嵌套,可以选择某个元素下的子元素,例如:
ul li { color: blue; }
上述代码将选择所有位于ul标签下的li标签,并将它们变为蓝色。
使用“+”号将两个选择器进行连接,可以选择相邻的两个同级元素,并对后一个元素应用样式。例如:
p + p { margin-top: 20px; }
上述代码将选择所有紧接着前一个p标签的p标签,并在其上方添加一个20px的顶部边距。
最后,使用“>”符号将选择器进行嵌套,可以选择某个元素直接子元素,例如:
div >p { background-color: yellow; }
上述代码将选择所有位于div标签下的直接子元素p标签,并将它们的背景变为黄色。