C3部分特点

一、CSS3属性选择器

        1.CSS2的选择器有哪些？

              基础选择器：通配符选择器、标签选择器、类名选择器、多类名选择器、ID选择器

              复合选择器：交集选择器、并集选择器、子代选择器、后代选择器

              伪类选择器：:link、:hover、:active、:visited

        2.CSS3的选择器有哪些？

              属性选择器、伪类选择器、伪元素选择器

        3.

                1、[x]  选择所有带有x属性的元素 */

                      [fristName] {

                                background-color: red;

                      }

                  2、[x='y'] 选择属性名x=属性值y的元素

                      [fristName='H'] {

                                border: 20px solid blue;

                      }

                  3、[x^='y'] 选择以属性值y开头的属性名为x的元素

                      a[href^='https'] {

                                background-color: aqua;

                                font-size: 36px;

                                font-weight: bolder;

                      }

                  4、[x$='y'] 选择以属性值y结尾的属性名为x的元素 

                      p[href$='com'] {

                                text-decoration: line-through;

                      }

                  5、[x*='y'] 选择x的属性值中包含y 

                      [href*='www'],

                      .box,

                      input[type='text'] {

                                border: 3px dotted brown;

                      }

                  6、[x|='y'] 属性值以y-开头的 

                      [name|='get'] {

                                background-color: blueviolet;

                      }

二、CSS3伪类选择器

        1、el:last-child  选择el元素是其父元素的最后一个子元素

        2、el:first-child 选择el元素是其父元素的第一个子元素

        3、el:nth-child(n)  选择el元素是其父元素的第n个子元素

        4、el:nth-last-child(n)  选择el元素是其父元素的第n个子元素,从后往前数

        5、el:nth-of-type(n) 选择el元素是父元素的第n个el元素

        6、el:nth-last-of-type(n) 选择el元素是父元素的第n个el元素,从后往前数

三、CSS3伪元素选择器

        1、el::first-letter  选择el元素中文本的第一个汉字或者第一个字母

        2、el::first-line 选择el元素中第一行文本

        3、::after 给当前元素添加子元素，在最后的位置

        4、::before 给当前元素添加子元素，在开头的位置

四、CSS3颜色

         hsl()

                 h:hue 色相、色轮、色调 色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的

                  s:saturation 饱和度是一个百分比值;  0％意味着灰色。100％的阴影是全彩

                  l:lightness 亮度 也是一个百分点;   0％是黑色的，100％是白色的。

五、CSS3阴影

        盒子阴影/文本阴影: box-shadow/text-shadow     水平阴影 垂直阴影 阴影的模糊距离 影子的颜色 

         默认阴影的方向是水平向右和垂直向下，改变正负值即可改变方向

六、CSS3圆角边框

        border-radius:；

七、CSS3三角形

        设置四条相同宽度的边框（内容为空）

八、怪异盒模型

        让内边框与边框不会去影响盒子的尺寸 

                box-sizing: border-box;

          默认值 

                box-sizing: content-box;

九、背景      

        1.背景色的剪切属性 

                内容区域 

                        background-clip: content-box;

                内容+内边距区域 

                        background-clip: padding-box;

                内容+内边距+边框区域（默认的）

                        background-clip: border-box;

          2.背景图的剪切 

                内容+内边距+边框区域 

                        background-origin: border-box;

                内容+内边距区域（默认的） 

                        background-origin: padding-box;

                内容区域

                        background-origin: content-box;

十、BFC

        BFC的特点：

                1、默认BFC中的盒子垂直排列

                2、解决外边距合并，(overflow、display)

                BFC是一个独立的容器，里边的子元素不受外边盒子的影响