CSS selector

参考
[1] Selectors

Document Tree: HTML 中，每一对尖括号<elem> 包含一个 element，它们形成一棵树，包含关系即为父子关系。

<p id="id1" class="c1 c2"> Begin a paragraph. 
 <br />
 <table id="id2" class="c3">
  <tr>
   <th>Name</th>
   <td>Doggy</td>
  </tr>
 </table>
</p>

p, br, table, tr, th, td 都为 element.
br, table 为 p 的子节点

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element. 子孙关系（匹配 F，不匹配E）	Descendant selectors
E > F	Matches any F element that is a child of an element E. 父子关系（匹配 F，不匹配E）	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by a sibling element E. 兄弟关系（匹配 F，不匹配E）	Adjacent selectors
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".	Attribute selectors
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". 不是“不等于”，而是其中之一	Attribute selectors
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	Language specific. (In HTML, the same as DIV[class~="warning"].)	Class selectors
E#myid	Matches any E element with ID equal to "myid".	ID selectors

列表中，后面几个E后面不能有空格。

注意下面二者是不同的：

h1#myid

h1 #myid   匹配 h1 子孙中，任何 ID 为 myid 的 elements

逗号分隔列表：

h1, h2, h3 { font-family: sans-serif }

匹配 h1, h2 和 h3，它们的 style 相同

而

h1 h2 { font-family: sans-serif }

表示匹配 h2，且 h2 是 h1 的子孙

* 匹配任何 elements，它和其它 selector 结合时，可以省略不写，所以

• *[lang=fr] and [lang=fr] are equivalent.
• *.warning and .warning are equivalent.
• *#myid and #myid are equivalent.