【CSS笔记】关于css的各种新旧选择器和伪类和伪元素

今天晚上做了网易的笔试。。=  =。。。。恩。。。一言难尽。。。先补自己的缺漏再说吧

碰到几个css的选择器就有点懵逼。。。。有点忘。。= = 

选择器：

[att = val] => 属性完全匹配val

[att ^= val] => 属性的开头要匹配val(只要能匹配就好，比如[class^="te"]，就可以匹配到类名中有test的元素)

[att $= val] => 属性的结尾要匹配val(同上，能匹配就好，而且这个头，尾是相对每个类名来说的)

[arr *= val] => 属性中任何一段能匹配就好

* => 通配符，指所有元素

~ => 表示指定元素后的所有的兄弟元素(记得符号后要有匹配的选择器)

+ => 表示下方相邻的兄弟元素（也需要再加对象）

这里的相邻或者下方，都是对于dom结构来说的（或者说是html结构）

:not(选择器) => 排除选中元素中不是选择器中的元素

:empty =>指定元素为空的时候的样式(也是对于html或者dom来说，所以就算内部的元素设置成了不可见或者display:none这样，也能算空。但是同样的，如果内部有子元素，但是没有内容，也算是空的)

:target => 一般是该元素的id被当做页面的链接来做。就是比如<a href="#one">xxx</a>这样，那么点击a，页面跳转到指定id的元素时候，id就为target啦

:first-child => 指定元素的父元素的第一个子元素，并不是该类型元素的第一个成员！

:last-child => 最后一个元素，同上

:nth-child(i) => 指定元素的父元素的正数第i个元素（从1开始），对比nth-of-type，选到的元素不一定是该类的元素

:nth-last-child(i) => 倒数，同上.但是这几个好似只可以匹配标签，不能匹配类

关于楼上的i，可以是正数，可以是odd,even，也可以是4*n + 1这样的表达式（循环使用样式）来筛选指定位置的元素。

:nth-of-type(i) => 父元素中第i个该类元素

:nth-last-of-type(i) => 倒数，同上

伪类:

:hover => 鼠标悬停的时候

:active => 一般对于a标签来说，当标签被点击的时候

:visited => 同上，被点击之后

:focus => 针对文本框控件(类似input输入框这样)，获得光标焦点时候的样式

:enabled => 当元素处于可用状态的时候

:checked => 当元素处于不可用状态的时候

::selection => 当文本被选中时候的样式(注意是双冒号)

:enabled => 当元素处于可用状态时

:disabled => 当元素处于不可用状态时（需要指定元素的disabled属性为"disabled"）

:checked => 表单中的单选框或者复选框处于选取状态的的样式

:default => 打开页面时表单中默认选择的元素样式，即使后来被设为非选取，样式仍然有效

伪元素:

::before => 一般用于元素后插入内容

::after => 一般用于某个元素前插入一些内容

::first-line => 设置元素中首行文字的样式

::first-letter => 设置首个字母的样式