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. windows 7系统搭建本地SVN服务器的过程

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  2. mybatis的#{}和${}的区别以及order by注入问题

    前言略,直奔主题.. #{}相当于jdbc中的preparedstatement ${}是输出变量的值 你可能说不明所以,不要紧我们看2段代码: String sql = "select * ...

  3. java poi read write xlsx

    package myjava; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExce ...

  4. 为TFS配置跨平台的生成服务器Xplat (Ubuntu Linux)

    1. 概述 从TFS 2015开始,微软开始支持跨平台的构建代理.你可以使用TFS的Xplat代理,方便的在基于IOS, Unix和Linux的服务器上搭建生成代理,实现构建.发布等功能.本文档已Ub ...

  5. openstack排错

    一.排错方法: 1.查看日志路径为/var/log,具体哪个组件出了问题进入其目录查看. 2.debug root@sc-ctrl01:~# keystone --debug user-list ro ...

  6. 在EntityFramework6中执行SQL语句

    在EntityFramework6中执行SQL语句 在上一节中我介绍了如何使用EF6对数据库实现CRDU以及事务,我们没有写一句SQL就完成了所有操作.这一节我来介绍一下如何使用在EF6中执行SQL语 ...

  7. 矩阵乘法快速幂 codevs 1250 Fibonacci数列

    codevs 1250 Fibonacci数列  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 定义:f0=f1=1 ...

  8. 如何使用AutoIT完成单机测试

    下面我们来介绍如何使用AutoIT完成单机程序的自动化测试.使用AutoIT完成桌面应用程序的自动化测试,最重要的是找到识别GUI对象的方法,然后调用AutoIT函数来操纵它或读取它的属性值,并与正确 ...

  9. TestLink学习一：Windows搭建Apache+MySQL+PHP环境

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  10. ［转］比较Jmeter、Grinder和JAVA多线程本身压力测试所带来的性能开销

    1. 测试环境 jmeter版本 :jmeter 2.4 grinder的版本 : Grinder 3 JAVA的版本:JDK 1.6 2. 测试代码 Jmeter测试代码 public class  ...