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
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1