选择器（css3新增的）

属性选择器

写法如下，可以自定义属性

可以选择拥有某个属性的
可以选择某个属性为多少值的

div[class='box']{   
}

li[color]{        /* color 是自定义的属性 */    /*标签身上有color属性就能选择到 */
        }

伪类选择器

nth-child 和nth-of-type

第一种nth-child

p:nth-child(1) 表示找满足： 【某一层】的第一个，且恰好是p标签的（从1开始数）
P:nth-last-child(1) 同上，表示倒着找
除此之外：nth-child(odd)表示奇数行或者 nth-child(even) 表示偶数行

第二种nth-of-type

p:nth-of-type(2) 表示找满足： 【某一层】中的第二个(正数） p 标签（从1开始数）
p:nth-last-of-type() 同上，表示倒着找

:first-child和 :first-of-type

p:first-child{} == p:nth-child(1){}
p:last-child{} == p:nth-last-child(1){}

p:first-of-type{} == p:nth-of-type(1){}
p:last-of-type{} == p:nth-last-of-type(1){}

:target

a标签设置时， href = "#跳的元素的id"，这样点击a标签，就锚到了对应的元素

div:target{} 表示当选到div元素的锚点时的样式。

:checked

表示选择被选中的选项，如 input的多选框 checkbox，和input的但选项 radio

文本伪类

    E:first-line        E标签的第一行
    E:first-letter       E标签的第一个
    E::selection         E标签中选中的文本 （可以改背景颜色，字体颜色， 必须要两个冒号）
    E:before             E标签文本前 加东西
    E:after              E标签文本后 加东西

:not() 略

选择器1~选择器2

如下 /符号~ 表示选择器1 同层之后，符合选择器2的/ 如图： ul 同层后的 p 都是红色 p同层后的 span#blue 为蓝色

新增样式

字体阴影text-shadow

可以多个重叠，如： text-shadow: 5px 5px 10px red ,-5px -5px 10px green;

参数1 x轴偏移量（正值往右，负值往左边）
参数2 y轴偏移量
参数3 阴影的大小
参数4 -----的颜色

盒子模型box-shadow

用法和字体阴影一样，（在笔记一中也有提到）

不同的是，多了两个可选参数：

可选参数0-最前面, insert 表示内阴影(一般没啥用)，默认为外阴影
可选参数2.5 阴影大小之前的参数，表示模糊程度

字体描边

 /* 文字描边（google才能用）
               参数1：描边大小
               参数2：颜色
            */
-webkit-text-stroke: 3px red;

圆角

border-radius 如：border-radius: 20px;

1个表示4个角

2个值表示西北角（及对角），东北角（及对角）

4个值，表示左上，左右顺时针

还可以把举行整个变成圆形，把数值写成长宽的一半，也可以，这个写法border-radius: 50%;

transition 过度（基础的）

如：div 悬停变 div:hover时，可以在div的样式中增加 transition 。

 写法1：  transition: 2s(延迟) 1s(过度时间) all(可选) ease(可选)
                参数0， 表示延时2s ,再开始
                参数1, `过度`的时间   s    1s=1000ms
                参数2，要过度的属性( 宽，高， 背景)， all（默认的） ，  如：width (x方向有过度动画)  height   
                参数3：
                    cubic-bezier （一种曲线运动）   生成曲线网址 https://cubic-bezier.com/
                    以下都是几种特殊的区县
                    ease（默认， 匀减速）   linear(匀速)  
                    ease-in(匀加速)    ease-out（也是减速）   ease-in-out(先加速后减速)    
写法2（可对 宽，高， 背景，分别过度[同时开始]）： transition: 1s width ,3s 2s height, 4s background ease-in-out

transform 2D的变换

写法1：#div1:hover{} 表示针对id为 div1 的悬停效果

（只针对块元素有作用）如：div 悬停变 div:hover时，可以在div:hover的样式中增加 transform 。 transform: rotate(60deg)

            rotate(度数)        旋转 单位deg
            skew(度数)             倾斜  单位deg   (表示 是和  Y轴 形成角度， 往左上倒)
                skewX（默认的）---X方向变形， 但是，是与Y形成角度
                skewY         --- Y方向变形
                skew(30deg,45deg)   30表示 X方向的变形， 45 表示Y方向的变形。  （简单理解：数越大，那个方向的拉的越长）
            scale(倍数)          缩放 ，没单位
                scale(2)      xy方向都是扩大1倍   
                scaleX        ---只有X方向的缩放
                scaleY         ---只有Y方向的缩放
                scale(2,3)  
                scale(0.5)       0 到1 之间是缩小
            translate(像素)           位移 单位px
                translate(100px)     默认在x方向，正数是往右
                translateX(100px)   x方向，正数是往右
                translateY(100px)  正数为往  下
                translate(200px,25px)

旋转、倾斜、缩放、位移可以共同写，一起作用 transform的执行顺序：写在后面的先执行，如：

transform:scale(2) translate(100px) 先位移后缩放

写法2： body:hover #div1{} 表示悬停到body上，但效果是在 id为div1的身上。

       body:hover #div1{
            transform: rotate(60deg)
        }

变换基点（即旋转、缩放、的中心点、倾斜的基点）

div 悬停变 div:hover时，可以在div的样式中增加 transform-origin

transform-origin: left top; 左上
transform-origin: left center; 左中
transform-origin: left bottom; 左下
transform-origin：50px 50px 数值形式

3d变换

旋转： rotate(度数) ，默认同rotateZ(度数)，是按Z轴选择的,

rotateX这样就是按X轴旋转
rotateY这样就是按Y轴旋转

位移：还可以沿Z轴方向动

translateZ(100px) （有放大的感觉）

补充：在父元素添后，更容易看见效果

            /* 有了这个东西就有了3d的效果，近大远小 */
            transform-style: preserve-3d;
            perspective: 150px;  /*焦点到平面的距离， 素描的一点透视*/
            /* 有了这个东西就有了3d的效果，近大远小 */

animation【渲染的动画】

可以理解成，加载过程中，从0 到100完成的过程的动画。

    <!-- 
        animation   【渲染的动画】  （渲染结束后该是什么样就是什么样）
        参数1           运动时间
        参数2           调用哪个关键帧
        参数3（可选）    过度的方式，ease 等 （同transition的）
        参数4(可选)      重复的次数 可以为数值
                        或 infinite  无限次
        参数5(可选)     动画的顺序  
                            alternate (0-50-100-50-0-50-100)
                            normal   (0-50-100   0-50-100)

        animation-play-state: paused;   表示动画暂停  （一般放在某个hover里）
        animation-play-state: running;  表示动画播放


        定义关键帧中，  
          @keyframes taokemove{0%{样式} 50%{样式}}
        50%表示时间到一半
        0到100都可以写，一般100不省去

     -->

CSS笔记(三)