CSS选择器归类

CSS选择器

基本选择器
    元素 选择器

    格式: 元素名+{声明块}
    例子: 元素名{ color:red;}

    类选择器
    格式: .类名+{声明块}
    例子: .tb{ color:red;}

    
    ID[不推荐使用,预留给JS]

    通配符选择器
    格式: *+{声明块}
    例子: *{ color:red;}

    并集选择器/组合选择器
    格式: 元素或类或id+","+元素或类或id+","+元素或类或id","+{声明块}

    例子: h1,.cc,h3{ color:red;}

层次选择器
     子级选择器
    格式:父级元素名称+">"+子级元素名称+{声明块}

    例子: div>p{color:red;}

     后代选择器
    格式:祖先元素名称+空格+后代元素名称+{声明块}

    例子: div p{color:red;}

     兄弟选择器
    格式: A元素名称+"+"+B元素名称+{声明块}

    例子: div+P{color:red;}
    注:选择A元素后的B元素,AB之间不许有其他元素.
    
     通用选择器
    格式:同级元素A+"~"+同级元素B+{声明块}

    例子: div~p{color:red;}
    注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)


伪类选择器
     动态伪类选择器
    未访问
    a:link{color:black;}
    鼠标悬停
    a:hover{color:pink;}
    鼠标点击时
    a:active{color:green;}
    点击后
    a:visited{color:blue;}

    注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上.
    a:focus{color:red;}
    多用于输入框或链接
    注:IE7以前不支持:focus
    
    注:IE6以前不支持:hover :active


    以上5个的顺序要求:

    A:  link,visited,focus,hover,active

    B:  visited,link,focus,hover,active
    
    
     结构伪类选择器

    格式:元素名称+":nth-child(n)"+{声明块}
    例子: section:nth-child(2){color:deeppink;}

    表示选中html里的第二个section元素,文字设置为deeppink
    
    选中第一个
    格式:元素名称+":first-child"+{声明块}
    例子: p:first-child{color:red;}
    
    选中最后一个
    格式:元素名称+":last-child"+{声明块}
    例子: p:last-child{color:red;}


    选中奇数项
    格式:元素名称+":nth-child(odd)"+{声明块}
    例子:section:nth-child(odd){color:deeppink;}

    选中偶数项
    格式:元素名称+":nth-child(even)"+{声明块}
    例子:section:nth-child(even){color:deeppink;}


    
伪元素选择器

    元素后面加内容
    格式:元素名称+":after"+{content:"要添加的内容";}
    例子:  i:after
            {content:"姓名";}


    元素前面加内容
    格式:元素名称+":before"+{content:"要添加的内容";}
    例子:  i:before
            {content:"姓名";}
    
    
    元素第一行添加样式
    格式:元素名称+":first-line"+{声明块}
    例子: p:first-line{color:red;}


    元素第一个字母或第一个汉字
    格式:元素名称+":first-letter"+{声明块}
    例子: p:first-letter{color:red;}


    注:为了解决兼容性,伪元素选择器,建议打两个冒号