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>