CSS3 第一部分 2018-04-14

一、CSS3简介

是在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使Web开发变得更为高效和便捷。

1. 现状：需要添加私有前缀（-webkit-）、移动端优于pc端、不断改进中、应用广泛
2. 手册：
   [] 表示全部可选项
   || 表示或者
   | 表示多选一
   ？ 表示0个或者1个
   * 表示0个或者多个
   {} 表示范围

二、选择器

CSS3选择器与jQuery中所提供的绝大部分选择器兼容

1. 属性选择器
   参考手册
   1、E[attr] 表示存在attr属性即可；
   2、E[attr=val] 表示属性值完全等于val
   3、E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的
   4、E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
   5、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
   6、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
   7、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置
   用法实例

   .attr3 a[class|="download"] {
      color: red;
    }

    .attr4 a[class*="download"] {
      color: red;
    }

    .attr5 a[class^="download"] {
      color: red;
    }

    .attr6 a[class$="download"] {
      color: red;
    }

2. 伪类选择器
   E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
   E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的
   存在
   E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
   E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。

        /*相对于父元素作参考，所有子元素的第一个*/
        dt:first-child {
            color: red;
        }
        /*相对于父元素作参考，所有子元素的第一个，位置也要对应，下面代码是不起作用的*/
        dd:first-child {
            color: yellow;
        }
        /*相对于父元素作参考，特定类型（E）的第一个子元素*/
        dd:first-of-type {
            color: red;
        }
        dd:nth-of-type(2) {
            color: blue;
        }
        /*选最后一列*/
       span:last-child {
        color: red;
       }
        /*选最后一列，权重更高*/
       dd span:last-child {
        color: yellow;
       }
        /*/第一行第一个*/
       dd:first-of-type span:first-of-type {
        color: green;
       }

关于n的取值范围(线性变化：
1、当n做为一个独立值时，n取值为 n>=1，例nth-child(n)
2、当n做一个系数时，n取值为n>=0者n<0，例nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1，是可以为0的；
选择前3个，利用-n+3

E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；
E:only-of-type表示当前以E确定的父元素， 除E之外不能包含其它和E同类型的子元素；
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
E:empty 选中没有任何（内容）子节点的E元素；

3. 伪元素
   after、before伪类在浏览器中识别为伪元素：高版本向下的兼容

E::selection 可改变选中文本的样式
E::placeholder 可改变placeholder（占位符）默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册。
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，
新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。
":" 与 "::" 区别在于区分伪类和伪元素

QQ图片20180415205952.jpg

小作业

       span:last-child {
        color: red;
       }
       span:nth-last-child(2) {
        color: red;
       }
       dd:first-of-type span:nth-of-type(1) {
        color: gray;
       }
       dd:first-of-type span:nth-of-type(2),
       dd:first-of-type span:nth-of-type(2) i {
        background-color: yellow;
        color: white;
       }
       dd:nth-of-type(2) span:nth-of-type(1) i,
       dd:nth-last-of-type(2) span:nth-of-type(2) i
       {
        color: red;
       }
       dd:nth-last-child(1) span:nth-last-of-type(-n+3) {
        color: gray;
       }

三、css颜色

新增RGBA、HSLA模式

1. 其中的A 表示透明度通道，即可以设置颜色值的透明度（不会继承）
2. Red、Green、Blue、Alpha即RGBA
   Hue色彩、Saturation饱和度、Lightness明亮度、Alpha即HSLA
3. R、G、B 取值范围0~255
4. H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色（用时参考）
   S 取值范围0%~100%
   L 取值范围0%~100%
   A 取值范围0~1

• opacity具有继承性，会影响子元素的透明度。
• tansparent设置透明会像玻璃一样