常用的标签、类、ID选择器就不记录了，详细的css选择器可以参照此处的链接;

子选择器：
    eg. div > span
        作用范围：div中子级的span，能切仅能选择出子级的span，孙子级往下的都不能选择到

相邻兄弟选择器：
    eg. p + span
        作用范围：同一个父级下，p标签下一个相邻标签是span标签的，可以被选中

同级元素通用选择器
    eg. p ~ span
        作用范围：同一个父级下，p标签往下的所有同级标签是span标签的，可以被选中

属性选择器
    eg. a[href]
        作用范围：选择带有href属性的所有a标签（选择带有某种属性的所有元素）
    eg. input[type="password"]
        作用范围：选择带有type属性，且type为password的所有input标签（选择带有某种属性，且属性的值的所有元素）

伪类选择器：

首先我们先引入伪类的概念：

伪类： 是一种特殊的属性，可以理解为表示一种状态
    a标签的伪类：
        :link
        :visited
        :hover
        :active

Tips:顺序一定不能改变，原因如下：
一、未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，<a>链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
二、再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前
三、其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
四、最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）

伪类选择器：
    :nth-child(an+b)
        eg. p:nth-child(1)
            作用范围：选择属于父级下的第1个元素，并且必须是p标签，直到匹配为止，否则不生效
    :nth-of-type(an+b)
        eg. p:nth-of-type(1)
            作用范围：选择属于父级下的第1个p标签，不关心p标签之前有什么其他标签
        参数（an+b）
            参数为1的时候代表第一个，以此类推
            参数为n的时候代表全部
            参数为2n的时候代表全部偶数个
            参数为2n-1的时候代表全部奇数个
    :first-child
        eg. p:first-child
            作用范围：选择属于父级下的第1个元素，并且必须是p标签，否则不生效
    :last-child
        eg. p:last-child
            作用范围：选择属于父级下的最后1个元素，并且必须是p标签，否则不生效
    :first-of-type
        eg. p:first-of-type
            作用范围：选择属于父级下的第1个p标签，并且一定会匹配p标签
    :last-of-type
        eg. p:last-of-type
            作用范围：选择属于父级下的最后1个p标签，并且一定会匹配p标签