css3知识点总结

1.兄弟选择器

（1）相邻兄弟选择器E + F { }
         紧挨选择器E后的那个兄弟选择器F

/* 相邻兄弟选择器 */
        p+span{
            color: #f00;
        }

（2）通用选择器

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

   /* 通用兄弟选择器 选择p元素后的所有span兄弟选择器 可以选到多个元素 */
        p~span{
            color: pink;
        }

2.属性选择器

        多用于表单中不同类型的input设置不同样式

/* 属性选择器 多用于表单中不同类型的input设置不同样式  */
        a[href="http://www.baidu.com"]{
            background-color: #f00;
        }
        input[type="text"],input[type="tel"],button[type="reset"]{
            background-color: pink;
            outline: none;
            border-color: pink;
            margin-top: 20px;
        }

3.伪类选择器

（1） 动态伪类选择器

 /* 表单元素获取焦点时设置样式 */
        input[type="text"]:focus{
            border: 2px dashed skyblue;
        }

（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个子元素 */
        div :nth-child(3){
            color: yellow;
        }

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

 /* 同种类型元素里的第一个元素 */
        .two :first-of-type{
            background-color: #f00;
        }

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

/* 同种类型元素里的最后一个元素 */
        .two :last-of-type{
            background-color: #f00;
        }

• :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;
        }

tips：①n  数字 从1开始    ②n还可以是表达式    2n    2n-1     ③n还可以是even偶数   odd奇数

4.伪元素 

（1）::first-letter{ }  首字母
（2）::first-line{ }  首行
（3）::selection{ }  网页内容选中样式