CSS选择器总结

前言

在前不久的项目中，实习小妹妹在一个全局的样式中使用了下面这个CSS选择器：

1#content{
2  & div:first-child{
3    height: 100%
4  }
5}

对应的html结构大致是：

1<div id="content">
2  <div>
3    ......
4  </div>
5</div>

实习妹子大致的意思是想要让content下的子元素div的高度100%，但是貌似她没有真正理解first-child的意义，从而导致这个全局的样式让 所有页面都出现了问题，然后我就只能帮忙修复。不过自己其实也并没有完全弄清，借着这个问题，有理由总结一下CSS的所有选择器。

1 基本选择器

基本选择器也就是这几种： */Tag/.class/#id，分别为通用元素选择器/标签选择器/class选择器/id选择器，非常地简单，就一笔带过了。

2 多元素选择器

多元素选择器有：

选择器	含义	CSS标准
E F	后代选择器(包含选择器), 选择E元素下所有的F元素，也就是所有的后代F元素	CSS2.1以及之前
E,F	群组选择器,同时匹配所有E元素或F元素，E和F之间用逗号分隔	CSS2.1以及之前
E > F	子选择器，选择E元素下所有的子元素F，记住是第一代元素	CSS2.1以及之前
E + F	相邻兄弟选择器，选择紧邻E元素的同一层级上的所有F元素	CSS2.1以及之前
E ~ F	通用选择器，匹配任何在E元素之后的同级F元素	CSS3

对应的demo如下：

3 属性选择器

属性选择器有：

选择器	含义	CSS标准
E[att]	用于选取带有指定属性的元素	CSS2.1以及之前
E[att=val]	用于选取带有指定属性和值的元素	CSS2.1以及之前
E[att~=val]	用于选取属性值中包含指定词汇的元素，该值必须是整个单词，要么是独立的整个单词，要么是后面跟着空格的整个单词	CSS2.1以及之前
E[att(这是竖线)=val]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，要么是独立的整个单词，要么是后面跟着-的整个单词	CSS2.1以及之前
E[att^=val]	匹配属性值以指定值开头的每个元素，注意与竖线操作符区别开来	CSS3
E[att$=val]	匹配属性值以指定值结尾的每个元素	CSS3
E[att*=val]	匹配属性值中包含指定值的每个元素，注意与~操作符区别开来	CSS3

demo以及讲解可以参考：

注意： 因为这个markdown会将竖线当成换列，加转义字符\也没有用。

4 动态伪类选择器

这类选择器有：

选择器	含义	CSS标准
E:link	链接伪类选择器，选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上	CSS2.1以及之前
E:visited	链接伪类选择器，选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上，	CSS2.1以及之前
E:active	用户行为选择器，选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上	CSS2.1以及之前
E:hover	用户行为选择器，选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover	CSS2.1以及之前
E:focus	用户行为选择器，选择匹配的E元素，而且匹配元素获取焦点	CSS2.1以及之前

没有太多的坑，就不再细讲

5 目标伪类选择器

该类选择器只有一个：

选择器	含义	CSS标准
E:target	匹配文档中特定锚点被点击后的效果	CSS3

demo如下：

6 UI元素状态伪类选择器

该类选择器有：

选择器	含义	CSS标准
E:checked	选中状态伪类选择器，匹配选中的复选按钮或者单选按钮表单元素	CSS3
E:enabled	启用状态伪类选择器，匹配所有启用的表单元素	CSS3
E:disabled	不可用状态伪类选择器，匹配所有禁用的表单元素	CSS3
E::selection	匹配用户当前选中的元素	CSS3
大部分都是常用的，也就不多说了。

注意 最后的selection需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

7 结构伪类选择器

该类选择器有：

选择器	含义	CSS标准
E:fisrt-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同	CSS2.1以及之前
E:first-line	匹配E元素的第一行	CSS2.1以及之前
E:first-letter	匹配E元素的第一个字母	CSS2.1以及之前
E:before	在E元素之前插入生成的内容	CSS2.1以及之前
E:after	在E元素之后插入生成的内容	CSS2.1以及之前
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同	CSS3
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同	CSS3
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.	CSS3
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同	CSS3
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素	CSS3
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素	CSS3
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同	CSS3
E:last-of-tye	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同	CSS3
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素	CSS3
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素	CSS3
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点	CSS3

demo代码如下：

注意

1. first-child伪类选择器选择是它父元素的第一个孩子的所有元素，这个父元素可以为任意的元素，比如body/div/section等等，所以p:first-child可以选择大部分p标签。另外伪类有更高的优先级比元素选择器。p:first-child会覆盖掉div > p的样式
2. :nth-child注意与nth-of-type的区别！可以参考demo看出二者的不一样！
3. only-child注意与only-of-type的区别

8 否定伪类选择器

该类选择器只有一个：

选择器	含义	CSS标准
E:not(F)	匹配所有除元素F外的E元素	CSS3

demo如下：

9 问题

承接最开始的问题，想必大家都清楚使用first-child会带来的问题了吧？而且应该也能给出对应的解决方案了吧？

参考

1. w3schools
2. 最全CSS3选择器
3. Difference between div > p and first-child selector