css选择器模式

 

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

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

<div>
<h3>测试</h3>
<p>这是一个<strong>测试</strong>文本！</p>
</div>

从以上代码中，我们可以找出这样的关系：

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

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

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

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

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

h2 + * { color: red }

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