CSS/JQuery 多个选择器逻辑关系

在JQuery中，单个选择器是最简单的选择方式，没有逻辑问题。

一般地，有类型（tag）选择器，

如：h1 {...}，有id选择器，

如：#myid {...}，有类选择器，

如：.myclass{...}，等等。

这些选择器还可以聚集在一起使用，这样就出现了逻辑关系。

以逗号（，）为分隔符的组合：

多个选择器可以以逗号连接在一起，逻辑关系为或，即任何一个选择器都被选中。如：#myid,#yourid,.myclass {...}。这里任何具有#myid,#yourid,.myclas属性的元素将被选中。

使用 jQuery 时，我们能够通过逗号（,）分隔符，实现多个元素的选择。方便我们对多种元素进行同时操作。
 

$(".class1, .class2, #id1")

使用样例：
下面代码将页面上所有 class 为“c1”，id为“d1”的所有元素隐藏起来。

$('.c1, #d1').hide();

以空格（ ）为分隔符的组合：

多个选择器可以以空格连接在一起，逻辑关系为，前者为后者的祖先，后者为前者的子孙。从第一个选择器开始，下一个选择器从上一个选择器的子集中选择元素。如：h1.myclass {...}。这里，首先，所有h1元素被选中，然后这些被选中的元素要具有.myclass类。

以大于号（ >）为分隔符的组合：

多个选择器可以以大于号连接在一起，逻辑关系为，前者为后者的父亲，后者为前者的儿子。和空格分隔符不同，这里必须是直接的父子关系，非祖先和后代关系。如：h1>.myclass {...}。这里，首先，所有h1元素被选中，然后这些被选中的元素的儿子（child）中具有.myclass类的元素被选中。

• 以加号（ +）为分隔符的组合：

两个选择器可以以加号连接在一起，逻辑关系却和加号关系不大。加号左右的两个选择器将选择两个兄弟元素，但是，奇怪的是，并非这两个元素都被选中，而只能选中第二个。为什么要用加号呢？

 例如：

<h1>The red style has not been applied to this element.</h1>
<p>The red style has been applied to this element.</p>
<p>The red style has not been applied to this element.</p>

h1 + p {...} 将选中第一个<p>元素，<h1>和第二个<p>元素将不会选中。