css3知识点01—新增选择器+新增伪类+伪元素

一、css3新增选择器

1、兄弟选择器

• 相邻兄弟选择器

E + F { }
紧挨选择器E后的那个兄弟选择器F

 /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */
        div+span{
            color: pink;
        }

•  通用兄弟选择器

E ~ F{ }
选择器E后的所有的兄弟选择器F

/* 通用兄弟选择器，选择所有div元素后面的span元素 */
    /* 一对多 */
        div~span{
            color: green;
        }

2、属性选择器

（1）选择含有attr属性的元素
        [attr]{ }

（2）选择属性attr对应属性值是value的元素（完全匹配）

[attr="value"]{ }

[href]{
    background-color: pink;
    /* 只要标签中带该属性，就会被选中 */
}

a[href]{
    background-color: yellowgreen;
}   /* 首先是a元素，其次属性带href */


a[href="#"]{
    color: aqua;
}
/* a元素，属性是href，属性值是# */

3、伪类选择器

（1）动态伪类选择器

•  选择器:link{ }   未访问状态
•  选择器:visited{ }   访问后状态
•  选择器:hover{ }  鼠标悬停状态
•  选择器:active{ }  鼠标激活状态
•  选择器:focus{}   焦点状态

（2）UI状态伪类选择器

• :enabled{}  可用状态
• :disabled{}  不可用状态
• :checked{} 单选/复选框选中状态

  /* UI元素状态伪类 */
        input:disabled{
            background-color: #f00;
        }

（3）其他伪类选择器

• :first-child{ }  第一个子元素

 /* 第一个子元素 */
        div :first-child{
            color: red;
        }

• :last-child{ }  最后一个子元素

  /* 最后一个子元素 */
        div :last-child{
            color: pink;
        }

• :nth-child(n){ }  第n个子元素

                n还可以是表达式    2n    2n-1

                n  数字 从1开始

                n还可以是even偶数   odd奇数

 div :nth-child(1) {
            color: blue;
            /* div中的第一个子元素 */
        }

        div :nth-child(2) {
            color: blueviolet;
            /* div中的第二个子元素 */
        }

        /* ：nth-child(n) 选中父元素中第n个元素 */


        /* 选中奇数元素  2n-1 odd 第奇数个*/
        ul li :nth-child(odd) {
            background-color: aquamarine;
        }

        /* 选中偶数元素  2n even 第偶数个*/
        ul li :nth-child(even) {
            background-color: blueviolet;
        }

        /* 也可以用表达式选择 */
        ul li :nth-child(3n) {
            background-color: green;
        }

• :first-of-type{ }  同种类型元素里的第一个元素

 div :first-of-type{
     color: aquamarine;
     /* 每种类型选中第一个 */
  }

• :last-of-type{ }  同种类型元素里的最后一个元素

  div :last-of-type{
     color:red;
     /* 每种类型选中最一个 */
  }

• :nth-of-type(n){ } 同种类型元素里第n个元素

/* 偶数元素的两种表达 */
        div :nth-child(even){
            background-color: purple;
        }
        div :nth-child(2n){
            background-color: purple;
        }
/* 奇数元素的两种表达 */
        div :nth-child(odd){
            background-color: yellow;
        }
        div :nth-child(2n-1){
            background-color: yellow;
        }

4、伪元素

（1）首字母

::first-letter{ }

/* 首字母 */
p::first-letter{
    font-size: 50px;
    color:red ;
    font-weight: 900;
}

（2）首行

::first-line{ } 

/* 首行 */
p::first-line{
color: bisque;
}

（3）网页内容选中样式

::selection{ }

/* 网页内容选中样式 */
p::selection{
    background-color: pink;
    color: white;
}