前端基础从零开始-H5C3(第二天)

一:CSS3的兼容性:

        CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持,目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性           

浏览器内核:

 IE: -ms-transition     O: -o-transition    苹果: -webkit-transition    火狐  -moz-transition

 二. Css3新增选择器:

        1.相邻兄弟选择器:   +   

(如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 )

        2.匹配选择器:          ~     (匹配所有在选定元素后的同级元素)

        3.选中改变背景颜色 :    ::selection 

         (只能向选择器应用少量CSS属性：color、background等)

         4.内容追加选择器:  ::before       

                向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

                                          ::after            

                向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)

                (:before单冒号是css2的写法. ::before双冒号是 css3的写法)

         5.属性选择器:     attribute                用于选取带有指定属性的元素

                                     attribute=value     用于选取带有指定属性和值的元素

                                     attribute^=value   匹配属性值以指定值开头的每个元素

                                     attribute$=value   匹配属性值以指定值开头的每个元素

                                     attribute*=value    匹配属性值中包含指定值的每个元素

                                     attribute~=value  

                                      用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符

                                     attribute|=value  

                                      用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符

     6.伪类选择器:  

                整体结构性:

                                    :last-child 

                                     匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素

                                     :first-child

                                     匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素

                标签结构类型:

                                     :last-of-type       匹配某个父元素中最后一个某一类型的元素

                                     :first-of-type      匹配的是某父元素下相同类型子元素中的第一个

                其他选择器:  

                                      :root          

                                       将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。                                         在整个HTML页面中,指的就是整个“html”部分。

                                       :empty             指定当元素内容为空白时使用的样式。

                                       :not(selector)  排除selector选择器选中的元素,不对它们应用样式解析

                                       :target              对页面中某个target元素指定样式,该样式只在用户单击                                                                    了页面中的链接,并且跳转到target元素后生效

               表单状态:     

                                      :disabled          指定当前元素处于不可用状态时的样式

                                      :enabled          指定当前元素处于可用状态时的样式

                                      :checked         指定表单中单选框或复选框处于选中状态时的样式

               指定子元素的序号:  

                                :nth-child(n)             对指定序号的子元素设置样式（从前往后数）

                                (2n偶数 2n+1奇数 odd奇数 even偶数)

                                :nth-last-child(n)       对指定序号的子元素设置样式（从后往前数）

                                :nth-of-type(n)          匹配指定序号的同一种类型的子元素（从前往后数）

                                :nth-last-of-type(n)   匹配 指定序号的同一种类型的子元素（从后往前数）

  三: JS新增选择器                          

                                document.querySelector            获取一个元素

                                document.querySelectorAll()     获取多个元素

  四: CSS3新增样式属性

         1.background-image的渐变

                 线性渐变: background-image: linear-gradient(direction, color-stop1, color-stop2)

       如果不设置direction,那么从头部开始的线性渐变，红-黄-蓝色： (渐变方向, 颜色一, 颜色二...)

                  径向渐变: background-image: radial-gradient(circle, red, yellow, green)

                                        (circle圆形, ellipse椭圆形, 默认值是 ellipse )

         2.CSS3的opacity 属性:opacity 属性是设置元素的不透明级别

                                       语法:  opacity: value | inherit;

                                       (value: 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明） )

                                       (inherit : 应该从父元素继承 opacity 属性的值 )

         3.CSS3的filter(滤镜) 属性:

                         filter: grayscale     设置灰度             filter: blur          设置模糊

         4.函数:

                hsla() 函数:   hsla 表示  色相-饱和度-亮度  (Hue-saturation-lightness)

                                      hsla (颜色值0-360, 饱和度0%-100%,亮度0%-100%, 透明度0-1)

                calc() 函数   calc() 函数用于动态计算长度值