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. xamarin.android 图片高斯模糊效果

    代码如下: private static float BITMAP_SCALE = 0.1f; private static float BLUR_RADIUS = 12.0f; public sta ...

  2. Lua环境

    1.前言 Lua将其所有的全局变量保存在一个常规的table中,这个table称为“环境”.这种组织结构的优点在于,其一,不需要再为全局变量创造一种新的数据结构,因此简化了Lua的内部实现:另一个优点 ...

  3. [转]JavaScript实现 页面滚动图片加载

    本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...

  4. HBase性能调优

    因官方Book Performance Tuning部分章节没有按配置项进行索引,不能达到快速查阅的效果.所以我以配置项驱动,重新整理了原文,并补充一些自己的理解,如有错误,欢迎指正. 配置优化 zo ...

  5. Hello world S.B.S.

    #include <iostream> #include <conio.h> #include<cstdio> #include<cstring> #i ...

  6. 【读书笔记《Android游戏编程之从零开始》】16.游戏开发基础（动画）

    1. Animation动画   在Android 中,系统提供了动画类 Animation ,其中又分为四种动画效果: ● AlphaAnimation:透明度渐变动画 ● ScaleAnimati ...

  7. 【读书笔记《Android游戏编程之从零开始》】9.游戏开发基础（如何快速的进入 Android 游戏开发）

    1.不可盲目看API文档很多人在接触学习一门新的平台语言时,总喜欢先去探究一番API文档.先不说成效如何,至少编者认为这种方式不适合大部分人来效仿,主要原因在于 API 领域广泛,牵涉到的知识点太多, ...

  8. notepad++下的字体设置

    设置 - 语言格式设置 中

  9. Xcode中文乱码问题

    老师给拷贝的程序用Xcode打开中文显示是乱码,而预览里面是正常显示的,Xcode默认编码UTF-8没错的,怎么办呢? 解决办法:用自带的文本编辑器打开,全选,复制,Xcode中打开文件,粘贴,ok~ ...

  10. Saltstack-自动化部署

    Saltstack概述 Salt一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, 使其可以 ...