第十课：CSS选择器的介绍和区分
IE7以及以下版本：
getElementById是不区分表单元素ID与Name的，因此如果有一个表单元素只定义name，并与我们的目标元素ID同名，并且我们的目标元素在它的后面，那么就会选择到那个表单元素。所以一般在定义表单元素时，都会定义跟name一样的id，就是以防其他元素的id跟表单元素的name一样（文档中的id都是唯一的）。
getElementsByTagName，当参数为"*"通配符时，它会混入注释节点，并且无法选取Object下的元素。
属性选择器：
[attr ~= val] 会选择这样的元素：它有属性attr,并且属性的值里面有val。比如:attr = val,attr = val1 val，等都会选择上，一般应用在class属性上。
举例：
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}
如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。
那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
[attr |= val] 会选择这样的元素：它有属性attr,并且属性的值是val或者以"val-"开头。
举例：
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
一般来说，[att|="val"] 可以用于任何属性及其值。
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}
当然，这种属性选择器最常见的用途还是匹配语言值。
[attr *= val] 会选择这样的元素：它有属性attr,并且属性的值包含val字样。比如：attr = val,attr= val1 val,attr = chaojidanval等都会选择上。
关系选择器：
E+F 选择E元素后面的F元素（同级的，并且紧挨着E）。
举例：
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
E~F 选择E元素后面的所有F元素（同级的）。
伪类选择器：
:link，在IE8-IE10，取:link存在错误，它只能取A标签，而实际上:link指代A，AREA，LINK三种标签，其他浏览器没问题。
我们还可以通过document.links取链接元素，但是它不包含LINK标签。
另外，除了Opera,Safari外，其他浏览器取:focus正常。除了Opera，其他浏览器取:hover正确。
:lang语言伪类。lang虽然是DOM元素的一个属性，但:lang伪类与属性选择器有所不同，举个列子：
<body lang="de"><p>dddd</p></body>
如果使用[lang=de]，则只能选择body 元素。但是使用:lang(de)，则可以同时选择到body和p元素。
:root伪类 选择根元素，在HTML文档中通常是html元素。
:nth-child 匹配属于其父元素的第 N 个子元素，不论元素的类型。如果传入n，n是从0开始的。但是选取元素时，元素的计数是从1开始的。
比如：
:nth-child(n) ，n从0开始，但是0元素没有，所以实际上还是从1开始，相当于 :nth-child(n+1)
:nth-child(2) ，选择的就是父元素的第二个子元素，第一个元素用 :nth-child(1) 选择。:nth-child(0)不选择任何元素 。
如果前面加了p:nth-child(2) ，选择的是父元素的第二个子元素，而且这个子元素必须是p时，才会选中。
:nth-of-type 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
比如：
:nth-of-type(2) 会选择特定类型的第2个子元素。
它跟:nth-child的区别就是，nth-of-type不仅针对的是子元素而且是特定类型（会根据子元素的tagName分类，每一类再调用nth-child）的子元素，而nth-child只是针对子元素。
举个例子：
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
针对上面的html，由于p元素上面有h1,因此h1是第一项，第一个段落是第二项。这样就会：
这是标题 p:nth-child(odd) :nth-child(odd) 选择上了，但因为不是p元素，所以没选择上。
第一个段落。 p:nth-child(even) 蓝色
第二个段落。 p:nth-child(odd) 红色
第三个段落。 p:nth-child(even) 蓝色
第四个段落。 p:nth-child(odd) 红色
第五个段落。 p:nth-child(even) 蓝色
但使用
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
结果：
这是标题 h1:nth-of-type(odd) :nth-of-type(odd) 选择上了，但是不是p元素，所以没选择上。
第一个段落。 p:nth-of-type(odd) 红色
第二个段落。 p:nth-of-type(even) 蓝色
第三个段落。 p:nth-of-type(odd) 红色
第四个段落。 p:nth-of-type(even) 蓝色
第五个段落。 p:nth-of-type(odd) 红色
加油！
