C3 选择器

选择器：
   标签选择器  组合选择器  伪类选择器  属性选择器 

在 CSS3 中包含了四种组合方式:
    后代选择器(以空格分隔 “ ”)
    子元素(亲代)选择器(以大于号分隔 > ）
    相邻兄弟选择器（以加号分隔 + ） 相同的父元素 下一个兄弟元素
    后续兄弟选择器（以破折号分隔 ~ ） 相同的父元素 后面的所有兄弟元素

    CSS伪元素：(C2使用一个冒号，C3使用两个冒号，例如.box:: before, 为了向后兼容，很多浏览器也支持单冒号写法)
    ::before                .box::before            在每个.box元素的子元素之前插入内容
    ::after                .box::after            在每个.box元素的子元素之后插入内容
    ::first-letter        p::first-letter        选择每个<p> 元素的第一个字     只针对于块标签起作用    可使用 font color background margin padding border text-decoration vertical-align text-transform line-height float clear
    ::first-line            p::first-line        选择每个<p> 元素的第一行

CSS伪类(对类(class,标签)选择器的过滤)：
    语法：selector:pseudo-class {property:value;}  标签选择器
    selector.class:pseudo-class {property:value;}  class选择器

所有CSS伪类
    选择器                    示例              示例说明
    :checked            input:checked        选择所有选中的表单元素
    :disabled            input:disabled        选择所有禁用的表单元素
    :enabled            input:enabled        选择所有启用的表单元素（可操作的）
    :optional            input:optional        选择没有"required"的元素属性
    :in-range            input:in-range        选择元素指定范围内的值
    :out-of-range        input:out-of-range    选择指定范围以外的值的元素属性
    :read-only            input:read-only        选择只读属性的元素属性
    :read-write            input:read-write    选择没有只读属性的元素属性
    :required            input:required        选择有"required"属性指定的元素属性（必填项）
    :valid                input:valid            选择所有有效值的属性
    :focus                input:focus            选择元素输入后具有焦点

    :link                a:link                选择所有未访问链接
    :visited            a:visited            选择所有访问过的链接
    :active                a:active            选择正在活动链接
    :hover                a:hover                把鼠标放在链接上的状态

    nth   第几个  排序  first second third forth fifth sixth seventh eighth
    number

    :nth-of-type(odd)奇数
    :nth-of-type(even)偶数

    :nth-of-type(n)       p:nth-of-type(2)        选择第二个为p的子元素
    :first-of-type        p:first-of-type        选择的每个 p 元素是其父元素的第一个 p 元素
    :last-of-type        p:last-of-type        选择每个p元素是其父元素的最后一个p元素
    :only-of-type        p:only-of-type        选择所有仅有一个子元素为p的元素
    :nth-last-of-type(n)    p:nth-last-of-type(2)    选择所有p元素倒数的第二个为p的子元素
    
    

    :nth-child(n)        p:nth-child(2)        选择所有 p 元素的父元素的第二个子元素   
    :last-child            p:last-child        选择所有p元素的最后一个子元素
    :first-child        p:first-child        选择器匹配属于任意元素的第一个子元素的 <p> 元素
    :nth-last-child(n)    p:nth-last-child(2)    选择所有p元素倒数的第二个子元素
    :only-child            p:only-child        选择所有仅有一个子元素的p元素
    

    :not(selector)        :not(p)                选择所有p以外的元素
    :empty                p:empty                选择所有没有子元素的p元素
    :root                root                选择文档的根元素 html
   

CSS的属性选择器：
    语法：selector[属性/属性=属性值]

    [attribute]                [target]            选择所有带有target属性元素    
    [attribute=value]        [target=-blank]        选择所有使用target="-blank"的元素    

    以下为CSS3的属性选择器：
    [attribute^=value]    a[src^="https"]        选择每一个src属性的值以"https"开头的元素    
    [attribute$=value]    a[src$=".pdf"]        选择每一个src属性的值以".pdf"结尾的元素    
    [attribute*=value]    a[src*="runoob"]    选择每一个src属性的值包含子字符串"runoob"的元素    

    "value 是完整单词" 类型的比较符号: ~=, |=
    "拼接字符串" 类型的比较符号: *=, ^=, $=