选择器模式mBL中国教程在线
模式 描述mBL中国教程在线
E 类型选择器，匹配任何一个名为 E 的元素。mBL中国教程在线
E F 子选择器，匹配元素 F ，如果 F 出现在元素 E 之内的话。mBL中国教程在线
E > F 父/子选择器，匹配元素 F ，如果 F 是 E 的子元素。mBL中国教程在线
E + F 相邻选择器，匹配元素 F ，如果 F 和 E 拥有共同的父元素，且 F 紧随 E 之后。mBL中国教程在线

这里有必要解释一下“父元素”、“子元素”、“父/子”及“相邻”这几个概念。为了便于说明，请看下面的代码：mBL中国教程在线

测试

这是一个测试文本！mBL中国教程在线

从以上代码中，我们可以找出这样的关系：mBL中国教程在线

* h3 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。mBL中国教程在线
* h3,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）mBL中国教程在线
* div 是 h3 和 p 的“父元素”。mBL中国教程在线
* strong 和 p 形成“父/子”关系，strong 的“父元素”是 div 。mBL中国教程在线
* 但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。mBL中国教程在线
* div 是 h3 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。mBL中国教程在线
* h3 和 p 两者是相邻的。mBL中国教程在线

上面一段好像绕口令，但是很重要，特别是有助于区别对待“E F”和“E > F”这两者的区别。mBL中国教程在线

这里我们借助上面的那个例子来演示一下这细微的差别：假如，我们需要将 strong 内的“测试”二字变为红色，我们都可以有哪些方法呢？mBL中国教程在线

1. div strong {color:red;} － 正确。strong 是 div 的“子元素”。mBL中国教程在线
2. p > strong {color:red;} － 正确。strong 和 p 是“父/子”关系。mBL中国教程在线
3. div > strong {color:red;} － 错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接。mBL中国教程在线

最后再提一下通用选择器，通用选择器以星号“*”表示，可以用于替代任何 tag ，比如下边这个：mBL中国教程在线

h2 + * { color: red }mBL中国教程在线

按照上述定义，则所有紧随 h2 的元素内的文字都将呈现红色。