参考手册选择符.docx

1、参考手册选择符一、关系选择符1.1包含选择符(E F)选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子.E F VS. EF： /* 包含选择符(E F) */ .demo div border:1px solid #f00; /* 子选择符(EF) */ .demo div border:1px solid #f00; 0 1 2 3 此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用.demo div，那么只有 0 有边框，即只有子元素会被命中。1.2 子选择符(EF)选择所有作为E元素的子元

2、素F。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。示例：.demo div position: relative; 子选择符 此例只有 .a 会被命中，因为它是 .demo 的子元素；1.3 相邻选择符(E+F)选择紧贴在E元素之后F元素。与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。EF VS. E+F： /* 相邻选择符(E+F) */ p+pcolor:#f00; /* 兄弟选择符(EF) */ ppcolor:#f00;p1p2这是一个标题p3这是一个标题p4p5此例，如果使用p + pcolor:#f00;，那么p2, p5将会变成红色；如果使用

3、p pcolor:#f00;，那么p2,p3,p4,p5将会变成红色；1.4 兄弟选择符(EF)选择E元素后面的所有兄弟元素F。与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。EF VS. E+F： /* 相邻选择符(E+F) */ p+pcolor:#f00; /* 兄弟选择符(EF) */ ppcolor:#f00;p1p2这是一个标题p3这是一个标题p4p5此例，如果使用p + pcolor:#f00;，那么p2, p5将会变成红色；如果使用p pcolor:#f00;，那么p2,p3,p4,p5将会变成红色；二、属性选择符2.1 Eatt选择具有at

4、t属性的E元素。例如：imgalt margin: 10px;此例，将会命中第一张图片，因为匹配到了alt属性2.2 Eatt=val选择具有att属性且属性值等于val的E元素。例如：inputtype=text border: 1px solid #000;此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text2.3 Eatt=val选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。例如：divclass=a border: 1px solid #000;123此例，将会命中1, 3两个div，因为

5、匹配到了class属性，且属性值中有一个值为a2.4 Eatt=val选择具有att属性且属性值为以val开头的字符串的E元素。例如：divclass=a border: 1px solid #000;123此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头2.5 Eatt$=val选择具有att属性且属性值为以val结尾的字符串的E元素。例如：divclass$=c border: 1px solid #000;123此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾2.6 Eatt*=val选择具有att属性且属性值为包含val的字符

6、串的E元素。例如：divclass*=b border: 1px solid #000;123此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b2.7 Eatt|=val选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择。例如：divclass|=a border: 1px solid #000;123此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着-的a开头三、伪类选择符3.1 E:link设置超链接a在未被访问前的样式。 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪

7、类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现 超链接的4种状态，需要有特定的书写顺序才能生效。超链接状态顺序：a:link a:visited a:hover a:active 注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括3.2 E:focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。 webkit内核浏览器会默认给:focu

8、s状态的元素加上outline的样式。例如：input:focus background: #f6f6f6; color: #f60;border: 1px solid #f60;outline: none;3.3 E:lang(fr)匹配使用特殊语言的E元素。例如：p:lang(zh-cmn-Hans) color: #f00;p:lang(en) color: #090;大段测试文字english3.4 E:not(s)匹配不含有s选择符的元素E。 有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线示例：.demo li:

9、not(:last-child) border-bottom: 1px solid #ddd;上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线3.5 E:root匹配E元素在文档的根元素。在HTML中，根元素永远是HTML 根据这个特性，可以做IE8的Hack示例：.test color: black; color: yellow0; *color: blue; _color: red;html:root .test color: purple0;上述代码：非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red3.6 E:f

10、irst-child匹配父元素的第一个子元素E。 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 这里可能存在误解：示例代码： 列表项一 列表项二 列表项三 列表项四在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-childsRules，而不是ul:first-childsRules。 来看这样一段代码：示例代码：p:first-childcolor:#f00; 我是一个p这段代码你能看到p元素被命中变成了红色 假设将代码简单地修改一下：示例代码：p:first-childcolor:#f00; 我是一个标题

11、我是一个p只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why? E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。3.7 E:last-child匹配父元素的最后一个子元素E。 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素。 通过具体的例子来进行理解：有效的代码：p:last-childcolor:#f00; 我是一个标题 我是一个p无效的代码：p