css3 新增选择器

子集选择器

作用：用于选取带有特定父元素的元素。
语法：element1>element2
注意：如果element2不是element1父级元素的直接子元素，则不会被选择。

子集选择器代码示例

<div class="element1">
    <p class="element"></p>
</div>
>符号之前书写的是父级选择器，>符号之后书写的是子集选择器，必须满足父子及关系才能被选中。

兄弟选择器

相邻兄弟选择器

作用：用于选择紧跟在元素后面的兄弟元素，并且两个元素有相同的父标签。
语法：element1 + element2
注意：1.选中的是紧跟在element1后面的element2元素。
    2.只能选中element1后面的一个element2元素。
    3.两者必须有相同的父元素。

相邻兄弟选择器示例

<div class="box">
    <p class="element1"></p>
    <p class="element2"></p>
    <p class="element2"></p>
</div>
只能选中element1后面紧跟的element2元素，且只能选择一个。
<div class="box">
    <p class="element1"></p>
    <span></span>
    <p class="element2"></p>
    <p class="element2"></p>
</div>
如果element1和element2之间有span相隔，则无法选取到element2标签。

其他兄弟选择器

作用：其他兄弟选择器匹配在同一个父元素中element1之后所有的element2元素。
语法：element1~element2
注意：1.选择的是element1后面所有的element2标签。
    2.element1和element2必须是在同一个父元素下，但是element1和element2中间可以有其他元素相隔。

结构伪类选择器

E:nth-child(n)详解

描述：匹配父元素中的第n个元素E。
注意：1.在语法书写的时候，可以选择在nth-child(n)前面添加标签名，也可以不添加。如果添加标签名，则表示选择的是父元素下的第n个E元素，需要同时满足这两个条件，即父元素下的第n个标签元素是E。此时才会被选中。
    2.n可以写成是数字，也可以写成是even和odd，even表示选择父元素下的偶数标签，odd表示选择父元素下的奇数标签。
    3.n也可以使用公式，比如2n，就表示从n从0开始乘以2，一直到超出选择元素的个数。也可以有其他的公式自由组合。

E:first-of-type

描述：首先将元素根据标签名进行分组，然后选择分组后的第一个元素。同理，last-of-type选择最后一个元素。ntn-of-type(n)选择分组后的第n个元素。

nth-child(n)和 nth-of-type(n)的区别：

1.E:nth-child(n)匹配父元素的第n个子元素E，同时需要满足两个条件，即父元素下第n个子元素为E。
2.E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，会忽视掉其他同级的非兄弟类元素。

伪元素选择器::before

语法：E::before
描述：在E元素内部前面添加一个元素或内容
注意：1.伪元素只能给双标签的元素添加，单标签元素不可以使用伪元素。
    2.伪元素的冒号前不允许有空格，如E ::before写法是错误的。
    3.伪元素里面必须写上属性content:""。
    4.伪元素创建的元素是行内元素。
示例：css：
        .box-box::before {
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    html：
        <div class="box-box">
            <p class="element1"></p>
            <p class="element2"></p>
            <p class="element2"></p>
        </div>

伪元素选择器::after

语法：E::after
描述：在E元素内部后面插入一个元素或内容

伪元素选择器::first-letter

语法：E::first-letter
描述：选择到E容器内第一个字母

伪元素选择器::first-line

语法：E::first-line
描述：选择到E容器内的第一行文本

css3 新增属性选择器

选择器权重

基础选择器：id选择器 > 类选择器 > 标签选择器 > 通配符选择器
伪类选择器，属性选择器的权重相当于类选择器。
伪元素选择器的权重相当于标签选择器。

新增属性选择器代码示例

CSS:
    <!-- 表示选择具有name属性的标签 -->
    input[name] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示选择type属性值等于checkbox的标签 -->
    input[type="checked"] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示选择class属性的属性子以icon开头的标签 -->
    input[class^="icon"] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示选择class属性的属性值以duo结尾的标签 -->
    input[class$="duo"] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示选择type属性中属性值包含o的标签 -->
    input[type*="o"] {
        width: 100px;
        height: 100px;
    }
HTML:
    <input type="radio" name="sex" class="icon-dan"> 男
    <input type="radio" name="sex" class="icon-dan"> 女
    <input type="checkbox" class="icon-duo"> 篮球
    <input type="checkbox" class="icon-duo"> 足球
    <input type="button" value="提交">

css3 盒模型 box-sizing

描述：可以通过box-sizing来指定盒模型，这样就可以设置如何计算一个元素的总高度盒总宽度。

box-sizing 属性

边框圆角

描述：设置边框的圆角。
语法：border-radius：属性值；
属性值：可以是像素又可以是百分比，百分比是参考盒子整体的宽度和高度的百分比。
注意：border-radius有单一属性的写法；
    border-left-radius
    border-top-radius
    border-right-radius
    border-bottom-radius
    2.IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

border-radius 属性值

文字阴影 text-shadow

描述：text-shadow向文本添加阴影，通过属性值能够添加水平阴影，垂直阴影，模糊距离以及阴影的颜色。
语法：text-shadow: 水平位置 垂直位置 模糊距离 颜色

文字多层阴影

描述：text-shadow可以向文字添加多层阴影，逗号分隔多个阴影的属性值（四个属性值），在多阴影中，先写的阴影压盖在后写的阴影上。
text-shadow: 3px 3px #FF0000,6px 6px #00ff00

阴影属性值

边框阴影

描述：box-shadow属性用于对边框添加阴影。
语法：box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内阴影；
注意：box-shadow也可以设置多层阴影，语法与text-shadow一样。

边框阴影属性值

过渡属性 transition

描述：在不适用flash和js的情况下，使用transition属性可以时间补间动画（过渡效果），并且当前元素只要有属性变化即存在两种状态，那么两种状态之间的切换就可以实现平滑的过渡效果。
语法：transition:过渡属性 过渡时间 运动曲线 延时时间;
兼容问题：1.IE10，Firefox，chrome等浏览器支持该属性。
    2.Safari浏览器需要前缀"-webkit-".
    3.IE9以及更早版本不支持transition属性。

transition-property 过渡属性

1.none：表示没有属性过渡。
2.all：表示所有变化的属性都过渡。
3.属性名：使用具体的属性名，多个属性名之间用逗号分隔。比如设置宽度过渡，当元素的宽度发生变化的时候，就会有过渡效果。

时间

过渡时间：以s秒为单位
延时时间：以s秒为单位
注意：0s也需要加单位。

运动曲线 transition-timing-function

2D 转换 transform

描述：对元素进行移动，缩放，转动，拉长或拉伸。配合过渡和动画知识，可以代替flash才能实现的效果。
属性值：多种转化方法的属性值，可以实现不同的转换效果。

2D 转换-位移-translate()

描述：当transform的属性值为translate()时，可以实现位移效果。
语法：1.translate(x,y),x和y分别表示水平方向和垂直方向的移动距离，可以为px的值和百分比。区分正负。
    2.translate(x):只有一个值，表示水平方向的位移。

2D 转换-缩放-scale()

描述：当transform的属性值为scale()时，可以实现元素缩放效果。
语法：1.scale(x,y):x和y分别表示改变元素宽度和高度的倍数。
    2.scale(n):只有一个值n，表示宽高同时缩放n倍。
    3.scaleX(n):改变元素的宽度。
    4.scaleY(n):改变元素的高度。

2D 转换-旋转-rotate()

描述：当transform的属性值为rotate()时，可以实现元素旋转效果，沿着元素的中心点进行旋转。
语法：rotate(数字deg)：deg表示度数单位，正数表示顺时针旋转，负数表示逆时针旋转，2D旋转只有一个属性值。
注意：当元素发生旋转后，元素的坐标也会发生变化，因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。

2D 转换-倾斜-skew()

描述：当transform的属性值为skew()的时候，可以实现元素的倾斜效果。
语法：skew(数字deg,数字deg)：两个数字分别表示水平方向和垂直方向的旋转角度，属性值可以为正可以为负，第二个属性值不写默认为0。

2D 转换-基准点 transform-origin()

描述：设置调整元素水平方向和垂直方向原点的位置。调整元素的基准点。
语法：transform-origin: x y;x表示定义x轴的原点在何处，可能的值分别为left，center，right，像素值，百分比。y表示定义y轴的原点在何处，可能的值同x相同。top，center，bottom，像素值，百分比。

2D 转换案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 225px;
            height: 150px;
            /* border: 1px solid black; */
            margin: 300px auto;
        }

        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 225px;
            height: 150px;
            transform-origin: right top;
            transition: all ease 1s 0s;
        }

        .box1 {
            background-color: skyblue;
        }

        .box2 {
            background-color: pink;
        }

        .box3 {
            background-color: salmon;
        }

        .box4 {
            background-color: sandybrown;
        }

        .box5 {
            background-color: tomato;
        }

        .box6 {
            background-color: darkseagreen;
        }

        .box:hover div:nth-child(1) {
            transform: rotate(60deg)
        }

        .box:hover div:nth-child(2) {
            transform: rotate(120deg)
        }

        .box:hover div:nth-child(3) {
            transform: rotate(180deg)
        }

        .box:hover div:nth-child(4) {
            transform: rotate(240deg)
        }

        .box:hover div:nth-child(5) {
            transform: rotate(300deg)
        }

        .box:hover div:nth-child(6) {
            transform: rotate(360deg)
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>

</html>

透视属性 perspective

描述：设置z轴的视线焦点的观察位置，从而实现3D查看效果。
属性值：像素值数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
注意：透视属性需要设置给3D变化元素的父级。
总结：如果想实现元素的3D转换，就需要给元素的父元素添加perspective属性，属性值越大图形想过月接近原始尺寸，属性值越小，3D旋转效果越明显。

3D 旋转

描述：3D旋转分为三个方向的角度旋转。
属性值：rotateX(angle):定义沿着X轴的3D旋转。
        rotateY(angle):定义沿着Y轴的3D旋转。
        rotateZ(angle):定义沿着Z轴的3D旋转。

3D 位移

描述：3D位移也分为三个方向的位移。
属性值：translateX(x):设置x轴的位移值。
        translateY(y)：设置y轴的位移值。
        translateZ(z): 定义3D位移，设置z轴的位移值

transform-style 属性

描述：用于设置在被嵌套的子元素在父元素的3D空间中显示，子元素会保留子集的3D转换坐标轴。
语法：transform-style: 属性值;
属性值：
    flat: 所有子元素在2D平面呈现。
    preserve-3d: 保留3D空间。
注意：该属性一般设置给3D变换图形的父元素。

transform 浏览器兼容

浏览器兼容：IE10,Firefox,以及opera浏览器支持transform属性，Chrome和Safari需要添加"-webkit-"前缀，IE9需要添加"-ms-"前缀。

动画

描述：在css3中动画效果需要两步，首先需要创建动画，然后需要绑定动画。

@keyframes 规则

描述：@keyframes规则用于创建动画，在@keyframes中定义某项css样式，就能创建从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数。
    需要使用百分比来规定变化发生的时间，或者使用关键词"from"和"to",等同于0%和100%，0%是动画的开始，100%是动画的结束。
语法：@keyframes 自定义动画名称 {
    动画过程，可以添加任意百分比处的动画细节
}

@keyframes 规则代码示例

/* @keyframes 百分比形式 */
@keyframes move2 {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(100px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-100px);
    }

    100% {
        transform: translateY(0);
    }
}
 /* @keyframes 定义动画 */
@keyframes move {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(100px);
    }
}

动画调用 animation 属性

描述：将@keyframes创建的某个动画绑定到选择器上，否则不会产生动画效果，animation属性就是将动画绑定到选择器上。
语法：div {
    animation: 动画名称 过渡时间 速度曲线 动画次数 延迟时间;
}
其中必须设置动画名称和过渡时间，速度曲线于transition的运动曲线一样。

动画代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            border-radius: 50%;
            background-color: skyblue;
            /* 绑定动画 */
            /* animation: move 3s linear; */
            animation: move2 3s linear;
        }

        /* @keyframes 定义动画 */
        @keyframes move {
            from {
                transform: translateY(0)
            }

            to {
                transform: translateY(100px);
            }
        }

        /* @keyframes 百分比形式 */
        @keyframes move2 {
            0% {
                transform: translateY(0);
            }

            25% {
                transform: translateY(100px);
            }

            50% {
                transform: translateY(0);
            }

            75% {
                transform: translateY(-100px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>