神通广大的CSS3选择器_html/css_WEB-ITnose

每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。 一、基本选择器 1. 通配选择器 「*」 立即学习 “ 前端免费学习笔记（深入） ”； 2.元素选择器 「Element」 立即学习 “ 前端免费学习笔记（深入） ”； 3.ID选择器 「#id」 立即学习 “ 前端免费学习笔记（深入） ”； 4.类选择器 「.class」 需要注意的是：多个页面元素可以有相同的类名，但是元素的id在页面中必须是唯一的。 立即学习 “ 前端免费学习笔记（深入） ”； 5.群组选择器 「selector1，…，selectorN」 立即学习 “ 前端免费学习笔记（深入） ”； 二、层次选择器 6.后代选择器「E F」 选择匹配E的元素内的所有匹配F的元素。 立即学习 “ 前端免费学习笔记（深入） ”； 7.子选择器「E > F」 选择配配E的元素的匹配F的直系子元素。 立即学习 “ 前端免费学习笔记（深入） ”； 8.相邻兄弟元素选择器「E + F」 E和F是同辈元素，具有相同的父元素，并且F元素紧邻在E元素的后面，此时可以使用相邻兄弟选择器。 立即学习 “ 前端免费学习笔记（深入） ”； 9.通用兄弟选择器「E ~ F」 E和F是同辈元素，具有相同的父元素，并且F元素在E元素之后，E ~ F将选中E元素后面的所有F元素。 立即学习 “ 前端免费学习笔记（深入） ”； 三、伪类选择器 10.动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」 立即学习 “ 前端免费学习笔记（深入） ”； 11.目标伪类选择器「E:target」 选择匹配E的所有元素，且匹配元素被相关URL指向。 通俗点说，页面的url如果带有#something这样的字样(https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1)那么:target就是用来匹配页面中id为#something(section-1)的元素的。 这里有一个demo，利用:target实现纯css的手风琴效果：[查看源码][运行demo] 立即学习 “ 前端免费学习笔记（深入） ”； 12.语言伪类选择器「E:lang(language)」 用来选择指定了lang属性的元素，其值为language。 有时候网页切换不同的语言版本的时候，可以通过这个选择器做一些特殊的处理。 立即学习 “ 前端免费学习笔记（深入） ”； 13.状态伪类选择器「E:checked,E:enabled,E:disabled」 立即学习 “ 前端免费学习笔记（深入） ”； 14.结构伪类选择器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」 立即学习 “ 前端免费学习笔记（深入） ”； 14.1 [E:first-child] 用来选取特定元素的第一个子元素。 立即学习 “ 前端免费学习笔记（深入） ”； 14.2 [E:last-child] 用来选取特定元素的最后一个子元素。 立即学习 “ 前端免费学习笔记（深入） ”； 14.3 [E:nth-child()],[E:nth-last-child()] 用来选取某个父元素的一个或多个特定的子元素，其中的n可以是数值(从1开始)，也可以是包含n的表达式，也可以是odd(奇数)，even(偶数)。 E:nth-last-child()选择器的使用方法于E:nth-child()是相同的，不同的是E:nth-last-child()选择的元素是从父元素的最后一个子元素开始算起。 立即学习 “ 前端免费学习笔记（深入） ”； 14.4  [E:root] 用来匹配元素E所在的文档中的根元素，在html文档中根元素就始终是html。 立即学习 “ 前端免费学习笔记（深入） ”； 14.5 [E:nth-of-type(),E:nth-last-of-type()] E:nth-of-type()只计算父元素中指定的某种类型的子元素，当某个元素的子元素类型不只是一种时，使用nth-of-type来选择会比较有用。 E:nth-last-of-type()的用法同E:nth-of-type()相同，不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。 li:nth-of-type(3)的话就会标识它只会选择第三个li元素，别的元素会忽略掉，如： 立即学习 “ 前端免费学习笔记（深入） ”； 但是使用nth-child就会是这样： 立即学习 “ 前端免费学习笔记（深入） ”； 14.6 [E:first-of-type,E:last-of-type] :first-of-type和:last-of-type这两个选择器类似于:first-child和:last-child，不同的就是指定了元素的类型。 立即学习 “ 前端免费学习笔记（深入） ”； 14.7 [E:only-child] 匹配的元素E是其父元素的唯一子元素，也就是说匹配元素的父元素只有一个子元素。 立即学习 “ 前端免费学习笔记（深入） ”； 14.8 [E:only-of-type] :only-of-type用来选择一个元素，他的类型在他父元素的所有子元素中是唯一的。也就是说，一个父元素有很多子元素，而其中只有一个子元素的类型是唯一的，那么就可以使用:only-of-type来选取这个元素。 这个属性说起来有点绕口，写了个简陋的demo说明意思：[查看源码][运行demo] 立即学习 “ 前端免费学习笔记（深入） ”； 14.9 [E:empty] :empty用来选择没有任何内容的元素，哪怕是一个空格都没有的元素。 立即学习 “ 前端免费学习笔记（深入） ”； 15 否定伪类选择器「E:not(F)」 可以用来选取所有除了F外的所有元素。 立即学习 “ 前端免费学习笔记（深入） ”； 四、伪元素 以前我们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号，主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法，但是其他现代浏览器两种表示方法是都可以的，也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。 16. 「::first-letter」 ::first-letter用来选择文本块的第一个字母,常用于文本排版方面。 立即学习 “ 前端免费学习笔记（深入） ”； 17. 「::first-line」 ::first-line用于匹配元素的第一行文本，也是常用于文本排版。 立即学习 “ 前端免费学习笔记（深入） ”； 18. 「::before,::after」 ::before,::after同我们之前熟用的:before和:after使用方法相同，它们不是指存于标记中的内容，是配合使用content属性可以插入额外内容的位置，尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。 立即学习 “ 前端免费学习笔记（深入） ”； 19. 「::selection」 css3新定义的伪元素::selection用来匹配突出显示的文本。但是使用前需要确认浏览器对它的支持程度。 浏览器默认的情况下，我们选中的文本背景是蓝色，字体是白色。通过使用::selection，我们可以改变它的效果。 但是需要注意的是，::selection仅接受两个属性，一个是background，一个是color。 立即学习 “ 前端免费学习笔记（深入） ”； 五、属性选择器 在html中，通过给元素添加属性，给以给元素添加一些附加的信息，属性选择器就可以通过定位属性来选取特定的元素。 20. 「 E[attr] 」 用来选择有某个属性的元素，不论这个属性的值是什么。 立即学习 “ 前端免费学习笔记（深入） ”； 21. 「 E[attr=val] 」 用来选取具有属性attr并且属性值为val的元素。 立即学习 “ 前端免费学习笔记（深入） ”； 22. 「 E[attr|=val] 」 E[attr|=val]用来选择具有属性attr且属性的值为val或以val-开头的元素(其中-是不可或缺的)。 立即学习 “ 前端免费学习笔记（深入） ”； 23. 「 E[attr~=val] 」 当某个元素的某个属性具有多个用空格隔开的属性值，此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。 立即学习 “ 前端免费学习笔记（深入） ”； 24. 「 E[attr*=val] 」 这个属性选择器使用了通配符，用来选择具有属性attr并且只要属性值中包含val字符串的元素。也就是说只要所选属性中有val字符串，不管是不是多个用空格分隔的属性值，都将被选中。 立即学习 “ 前端免费学习笔记（深入） ”； 25. 「 E[attr^=val] 」 用来选择属性attr的属性值是以val开头的所有元素，注意它与E[attr|=val]的区别，attr|=val中-是必不可少的，也就是说以val-开头。 立即学习 “ 前端免费学习笔记（深入） ”； 26. 「 E[attr$=val] 」 这个选择器刚好跟E[attr^=val]相反，用来选择具有attr属性且属性值以val结尾的元素。