CSS学习笔记--选择器

第一类：基本选择器（8种）

    1、元素选择器 E{}   特类*{}代表所有html元素
    2、属性选择器 E[attr=value]{}    ^=前缀,$=后缀，*=包含，=严格等于
        div[id^=zz]{
            color:red;
            }    
    3、id选择器 #id值{}
    4、class选择器 .class{}
    5、包含选择器 selector1 selector2 ……{}
        div s{
            color：red;
        }
    6、子选择器 selector1>selector2>……
        body>ul>li>a{}
    7、兄弟选择器selector1~selector2{} 从selector1之后寻找兄弟关系的selector2元素

 

第二类：伪元素选择器

1、首字符伪元素选择器 :first-letter
        使用前提是块级元素
        eg: .box:first-letter {
                        color:blue;}
2、首行伪元素选择器:first-line
        使用前提是块级元素
         eg: .box::first-line {
                color:blue;}
3、前插自定义伪元素选择器       ::before
使用前提是必须使用content属性指定内容。若无内容，则用空引号。
还设置图片urI()
        eg: . box: :before{
                content:" 5555”;
                color: blue;
                font-size: 30px;}
4、后插自定义伪元素选择器::after
使用前提是必须使用content属性指定内容。若无内容，则用空引号。
还设置图片url()
        . box: :after{
                content:ur1() ;
                font-size: 30px;}

第三类：伪类选择器

1、结构性伪类选择器
        :nth-child()正位置计数括号内放数字，从1开始，代表元素顺序位置;
                括号内可以放置两个预定义值: odd(奇数)、even(偶数)
                括号内可以放置表达式(-n+ 3)只认加号
        :nth-last-child()倒位置计数括号内放数字，从1开始，代表元素顺序位置;
                括号内可以放置两个预定义值: odd(奇数)、 even(偶数)
                括号内可以放置表达式(-n+ 3)只认加号
        :first-child()等价于:nth-child(1)
        :last-child()等价于:nth-last-child(1)
2、UI状态伪类选择器
        :hover悬停状态基本所有元素可以
        :focus焦点状态输入框元素可以
3、排除伪类选择器
        :not()排除元素,若需排除多个元素,连续书写
                eg: . box li:not(. java) :not(. qlq) {
                        color: aqua;}