前端知识汇总-----CSS选择器和CSS3新增选择器

CSS选择器：

      基础选择器： 

              *       匹配所有的选择器

             E      标签选择器p,header,aside

             .info  class选择器

            #info   id选择器

关系选择器：（相邻兄弟选择器）

   E+F      紧贴着E的元素第一个元素，即F

   E~F      E后面的所有兄弟节点都生效

   E F       包含元素

   E>F      指定E的子元素F

伪对象选择器：（可以精确选择文本和元素前后元素）

E::first-letter        选择文本的第一个元素

E::first-line          选择文本的第一行元素

E::before            选择所选E元素的前一个标签

E::after               选择所选E元素的后一个标签

E::selection        鼠标选中的元素的样式

结构伪类选择器：(可以精确选择一个父元素对应多个子元素的组合)

从爸爸来找儿子的关系：

E:nth-child(n)     选择E元素的爸爸的子元素，

E:first-child        选择E元素的爸爸的第一个儿子(子元素)

E:last-child       选择E元素的爸爸的最后一个儿子（子元素）

E:only-child       选择E元素的爸爸的唯一个儿子（子元素），只有当时独生子女才会被选中，如果爸爸有多个儿子就不会被选择

从元素的兄弟找关系:

E:nth-of-type     选择E作为节点找兄弟，包括自己

E:first-of-type    选择E作为节点找第一个兄弟

E:last-of-type    选择E作为节点找最后一个兄弟

E:only-of-type   选择E作为节点找唯一一个E，只有当是独生子女才会被选中

UI元素状态伪类选择器：

E:checked   被选中

E:enable     文本框允许使用

E:disabled  文本框禁止使用