举例说明如何使用多个选择器选取元素？

在Web开发中，使用多个选择器选取元素是常见的操作，尤其是在JavaScript和jQuery中。这里我将给出两种选择器的使用示例，一种是CSS选择器，另一种是jQuery选择器。

### CSS选择器

CSS选择器可以组合使用，通过逗号分隔来选择多个不同的元素。例如，如果你想要为页面上所有的`<div>`元素和所有的`<p>`元素设置边框，可以这样写CSS代码：

div, p {
  border: 1px solid black;
}

这个例子中，逗号表示选择所有`<div>`元素和所有`<p>`元素。

### jQuery选择器

在使用jQuery时，可以通过在选择器字符串中插入空格来选择元素的后代，通过逗号来选择不同的元素。例如，假设我们有一个列表，其中包含多层嵌套的`<li>`元素，你可以使用以下jQuery代码来选择所有第一层的`<li>`元素和所有的`<span>`元素，并将它们的背景颜色设置为黄色：

$('ul > li, span').css('background-color', 'yellow');

这里，`ul > li`选择所有的`<ul>`元素直接子代`<li>`元素，而`span`则是选择所有的`<span>`元素。然后，jQuery会将这些选择器匹配到的元素全部选中，并应用`.css('background-color', 'yellow')`方法。

相关问题

1、 复合选择器有哪些类型？请举例说明

复合选择器有三种类型：

1. 后代选择器：用空格分隔的多个选择器，表示选取某个元素下的所有后代元素。例如，div span 选取所有 div 元素下的 span 元素。

2. 子元素选择器：用大于号（>）分隔的多个选择器，表示选取某个元素下的直接子元素。例如，div > p 选取所有 div 元素下的直接子元素 p。

3. 相邻兄弟选择器：用加号（+）分隔的多个选择器，表示选取某个元素后面紧跟的兄弟元素。例如，div + p 选取紧跟在 div 元素后面的第一个 p 元素。

笑话时间：为什么足球场上的草地总是绿色的？因为它们天天被踢“高光”。