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)　　红色

加油！

第十课：CSS选择器的介绍和区分的更多相关文章

  1. CSS选择器基本介绍

    一.web标准 所谓的web标准就是用来衡量我们当前的网页书写是否规范的一系列要求,这个标准是由W3C组织制定,在web标准中具体的要求就是结构.样式.行为三者相分离 结构:通过HTML标签来搭建的网 ...

  2. Html学习之十（CSS选择器的使用--伪类选择器）

    伪类选择器 一.基于a标签. 1.:hover 选择鼠标滑过的超链接元素 2.:active 选择鼠标单击中的超链接元素 3.:link 选择未被访问的超链接元素 4.:visited 选择已经被访问 ...

  3. HTML 网页开发、CSS 基础语法——十二.CSS选择器

    选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...

  4. 第五十六 css选择器和盒模型

    1.组合选择器 群组选择器 #每个选择为可以位三种基础选择器任意一个,用逗号隔开,控制多个. div,#div,.div{ color:red } 后代(子代)选择器 .sup .sub{ 后代 } ...

  5. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. html之css选择器学习

    相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...

  7. 第十二课 CSS基本选择器 css学习2

    基础选择器一.标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类语法:标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 二.类选择器1.类选择器使用&q ...

  8. 第七十节，css选择器

    css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中  CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...

  9. 还需要学习的十二种CSS选择器

    在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...

随机推荐

  1. zsh

    一.简介 Zsh 也许是目前最好用的 shell,是 bash 替代品中较为优秀的一个.   二.优点 1)补全 zsh 的命令补全功能非常强大,可以补齐路径,补齐命令,补齐参数等. 按下 tab 键 ...

  2. Intent详解

    ntent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用间的交互与通 ...

  3. quick sort java version

    import java.util.Random; public class test { public static void main(String[] args) { int[] arr= gen ...

  4. [编]IoT The Internet of Things (IoT) 物联网

    物联网是新一代信息技术的重要组成部分.其英文名称是“The Internet of things”.由此,顾名思义,“物联网就是物物相连的互联网”.这有两层意思:第一,物联网的核心和基础仍然是互联网, ...

  5. 利用HttpListener创建简单的HTTP服务

    using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...

  6. 算法分析 Analysis of Algorithms -------GeekforGeeker 翻译

    算法分析 Analysis of Algorithms 为什么要做性能分析?Why performance analysis? 在计算机领域有很多重要的因素我们要考虑 比如用户友好度,模块化, 安全性 ...

  7. UVALive 6093 Emergency Room --优先队列实现的模拟

    题意:给n个医生,这些医生有一个上班时间,然后给一些病人,病人有一个到达的时间,以及一些诊断,诊断有property(优先级)和duration(诊断时间)这两个属性,每个病人可能要诊断多次,最后问每 ...

  8. Beaufort密码

    博福特密码,是一种类似于维吉尼亚密码的替代密码,由弗朗西斯·蒲福(Francis Beaufort)发明.它最知名的应用是M-209密码机.博福特密码属于对等加密,即加密演算法与解密演算法相同 博福特 ...

  9. VC/Wince 实现仿Win8 Metro风格界面3——按钮移动交换、删除、添加快捷方式（附效果图）

    上一篇文章写了如何进行页面滑动切换,今天我讲一下如何实现两个按钮拖动交换位置,包括同一个页面按钮交换或者两个页面之间的按钮交换.另外就是如何拖动删除界面上的快捷方式.按钮交换和拖动删除,这两个功能基本 ...

  10. 神奇的GO语言：空接口（interface）

    对于go语言来说,设计最精妙的应该是interface了,直白点说interface是一组method的组合.至于更加详细的描述,本文不做介绍,今天谈谈空接口. 空interface(interfac ...