CSS 3

CSS3现状

在CSS2的基础上新增(扩展)样式
移动端支持优于PC端
不断改进中
应用相对广泛

1.CSS3属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性、且具有以val开头的E元素
E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
E[att*="val"]	匹配具有att属性、且值中含有val的E元素

类选择器、属性选择器、伪类选择器，权重为10

<!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>
        button {
            cursor: pointer;
        }
        /*属性选择器使用方法*/
        button[disabled] {
            cursor: default;
        }
        input [type] {
            color: pink;
        }
        input[type="search"]{
            color: pink;
        }
        div[class^="icon"]{
            color: red;
        }
        div[class$="icon"]{
            color: green;
        }
        div[class*="icon"]{
            color: blue;
        }
             
    </style>
</head>
<body>
    <!--disabled是禁用我们的按钮-->
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div classs="icon3">图标3</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>

</body>
</html>

1.2结构伪类选择器

选择符	简介
E：first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-og-type(n)	指定类型E的第n个

nth-child(n)

n可以是数字、关键字和公式
n如果是数字，就是选择第几个
常见的关键词有even偶数odd奇数
常见的公式如下（如果n是公式，则从0开始计算）
但是第0个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15...
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）

<!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>
        ul li:first-child {
            background-color: pink;
        }
        ul li:last-child {
            background-color: deeppink;
        }
        ul li:nth-child(8) {
            background-color: lightpink;
        }
        /*nth-child(n) 我们要第几个n就是第几个*/
        ul li:nth-child(8) {
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>

2.3伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after必须有content属性
before在内容的前面，after在内部的后面
before和after创建一个元素，但是属于行内元素
因为再dom里面看不见刚才创建的元素，所以我们成为伪元素
伪元素和标签选择器一样，权重为1

2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform）你可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

2D转换之移动translate

2D移动是 2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1.语法

transform：translate(x,y);或者分开写

transform：translateX(n);

transform: translateY(n);

2. 重点

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
Translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
对行内标签没有效果

<!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>
        /*移动盒子的位置： 定位  盒子的外边距 2d转换移动*/

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*x就是x轴上移动位置 y就是y轴移动位置 中间用逗号分隔
            transform：translate（x,y);
            transform: translate(100px,100px);*/
            /*1.如果我们只移动x坐标*/
            transform: translate(100px,0);/*(100px)*/
            /*我们如果只移动y坐标*/
            transform: translate(0,100px);/*(100px)*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2D转换之旋转rotate

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

1.语法

transform：rotate（度数）

2.重点

rotate里面跟度数，单位是deg，比如rotate（45deg）
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

<!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>
        img {
            width: 150px;
            /*顺时针旋转45°*/
            transform: rotate(45deg);
            border-radius: 50%;
            border: 5px solid pink;
            /*过渡写到本身上，谁做动画给谁加*/
            transition: all 0.3s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="pvp.png" alt="">
</body>
</html>

2D转换中心transform-origin

我们可以设置元素转换的中心点

1.语法：

transform-origin： x y;

2.重点

注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center)

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition:all 1s;
            /*1.可以跟方位名词*/
            transform-origin: left bottom;/*一左下角为旋转点*/
            /*2.默认的是 50% 50% 等价于center center*/
            /*3.可以是px 像素*/
            transform-origin: 50px 50px;
        }
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制他放大还是缩小。

1.语法

transform：scale（x,y);

2.注意

注意其中的x和y用逗号分开
transform:scale(1,1): 宽和高都放大一倍，相对于没有放大
transform:scale(2,2)：宽和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）
transform:scale(0.5,0.5):缩小
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

<!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>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        div img {
            transition: all 0.4s;
        }
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div>
        <a href="#"><img src="wucaidaohang.png" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="wucaidaohang.png" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="wucaidaohang.png" alt=""></a>
    </div>
</body>
</html>

2D转换综合写法

注意：

同时使用多个转换，其格式为：transform: translate()rotate()scale()...等
其顺序会影响转换的效果，（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }

        div:hover {
            /*transform: translate(50px,50px) rotate(180deg);*/
            /*我们同时有位移和其他属性，我们需要把位移放到最前面*/
            transform: translate(150px,50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2D转换总结

转换Transform我们简单理解就是变形有2D和3D之分
我们暂且学了三个分别是位移旋转和缩放
2D移动translate（x,y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
可以分开写比如translateX(x)和translateY(y)
2D旋转rotate（度数）可以实现旋转元素度数的单位是deg
2D缩放scale（x,y)里面的参数是数字不跟单位可以是小数最大的优势不影响其他盒子
设置旋转中心点transform-origin:x y;参数可以百分比，像素或者方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前