CSS新增选择器
子级选择器
- 子级选择器用于选取带有特定父元素的元素
- 语法：element1 > element2
- 注意：如果element2 元素不是父元素的直接子元素，则不会被选择（父级选择器 > 子级选择器）
<!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>
.box > p {
background-color: pink;
}
.inner > p {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>这是 box 中的 p 标签元素</p>
<p>这是 box 中的 p 标签元素</p>
<div class="inner">
<p>这是 inner 中的 p 标签元素</p>
</div>
</div>
<p>这是一个单独的 p 标签元素</p>
</body>
</html>
效果图
兄弟选择器
| 选择器 | 简介 |
|---|---|
| element1 + element2 | 匹配同一个父级元素中紧跟在element1后面的一个element2元素 |
| element1 ~ element2 | 匹配同一个父级元素中在element1后面的所有的element2元素 |
相邻兄弟选择器
- 相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，二者还需要有同样的父元素
- 书写语法：E1+E2
- 注意：
1.选中的只能是紧跟在E1之后的同级元素E2
.box1 h2 + p {
background-color: blue;
}
<div class="box1">
<h2>二级标题</h2>
<div>内容</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
当中间添加了一个标签，h2与p就不是相邻的了，选择器条件不符合
2.只能选中紧跟在后面的一个E2元素
<div class="box1">
<h2>二级标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
只有紧跟的一个元素，剩下的不行
特殊情况
p + p {
color: red;
}
相互满足，就会顺序加载
3.二者要用相同的父元素
4.+ 符号前后可以添加空格书写
其他兄弟选择器
- 其他兄弟选择器匹配同一个父元素中在element1后面的所有element2元素
- 书写语法：element1 ~ element2
- 注意：
1.选择的是element1 后面出现的所有element2
2.不必紧跟，但是要有相同的父元素
3.~ 前后可以添加空格书写
.box2 h2 ~ p {
background-color: yellowgreen;
}
<div class="box2">
<p>段落0</p>
<h2>二级标题</h2>
<div>内容</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
效果图
结构伪类选择器
| 选择器 | 简介 |
|---|---|
| E:frist-child | 匹配父元素的第一个子元素E |
| E:last-child | 匹配父元素的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:frist-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
.box1 :first-child {
background-color: pink;
}
.box1 :last-child {
background-color: blue;
}
.box1 h2:nth-child(3) {
background-color: red;
}
<div class="box1">
<h2>二级标题</h2>
<p>段落1</p>
<h2>二级标题</h2>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
效果图
注意
.box1 h2:nth-child(3)
这行代码，要满足两个条件才能进行样式渲染，1.是h2标签。2.第三个子元素
nth-child(n)
- n可以是数字，关键字，公式
- n如果是数字，那就选择第n个
- 常见的关键字：even（偶数），odd（奇数）
- 常见的公式（如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）
- 但是第 0 元素或者超出了元素的个数会被忽略
公式 取值 2n 偶数 2n+1 奇数 5n 5,10,15—— n+5 从第五个开始（包含第五个）到最后5,6,7,—— -n+5 前五个（包括第五个），5,4,3,2,1,0........
E:nth-child(n)与E:nth-of-type(n)的区别
- E:nth-child(n) 匹配父元素的第n个子元素E，需要同时满足两个条件
-
E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，会忽视掉其他同级的非同类元素
伪元素选择器
- 新增为元素
选择器 介绍 E:before 在E元素内部的前面插入一个元素 E:after 在E元素内部的后面插入一个元素 E:frist-letter 选择到了E容器内的第一个字母 E:frist-line 选择到了E容器内的第一行文本
h5写法与传统写法
- 单冒号 E:before
- 双冒号 E::before
- 浏览器对以上写法都能识别，双冒号是h5的语法规范
<!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: 400px;
padding: 10px;
border: 1px solid #000;
}
.box p {
width: 50px;
height: 50px;
margin-bottom: 10px;
background-color: skyblue;
}
/* 给box盒子内部添加伪元素 */
.box::before {
content: "1";
display: block;
height: 50px;
background-color: pink;
}
.box::after {
content: "2";
display: block;
height: 50px;
background-color: pink;
}
/* .ps::first-letter {
color: red;
} */
.ps::first-line {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p class="ps">这是一个段落内容</p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
效果图
注意事项
- 伪元素只能给双标签添加，不能给单标签添加
- 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
- 伪元素里面必须写上属性 content:"";
- before 和 after 创建一个元素，但是属于行内元素。
- 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。
属性选择器
- 属性选择器用来选择包含指定属性的标签
选择器 简介 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元素
input[type*="o"] {
width: 30px;
height: 30px;
}
<body>
<p>
<input type="radio" name="sex" class="icon-dan"> 男性
<input type="radio" name="sex" class="icon-dan"> 女性
</p>
<p>
<input type="checkbox" class="icon-duo"> 运动
<input type="checkbox" class="icon-duo"> 代码
</p>
<p>
<input type="button" value="按钮">
<input type="submit" value="提交按钮">
</p>
</body>
效果
选择器权重
- 基础选择器：id>类>标签>*（id选择器>类选择器>标签选择器>通配符选择器）
- 伪类选择器、属性选择器的权重等于类选择器
- 伪元素选择器权重等于标签选择器
CSS 盒模型
box-sizing属性值
- CSS3 中可以通过box-sizing来指定盒模型，分为标准盒子模型和怪异模型
属性值 简介 content-box 默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。在 width 和 height 之外绘制元素的内边距和边框。 border-box 怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。
context-box标准模式
- Standard模式：盒子的总大小为width（height）+padding+border，内容部分是width+height部分
div {
width:100px;
height:100px;
padding:20px;
border:10px solid #ff0;
box-sizing:context-box;
标准模式
border-box怪异模式
- Quirks模式：盒子总体大小是width+height，如果添加了padding和border，内容区域会进行收缩
div {
width:100px;
height:100px;
padding:20px;
border:10px solid #ff0;
box-sizing:border-box;
10+20+40+20+10=100
CSS3新增属性
边框圆角
- 属性名：border-radius
- 作用：设置边框的圆角
- 属性值：像素值，百分比，百分比参考的是盒子整体的宽度，高度的百分比
属性值 说明 x-radius / y-radius / 分割两部分属性值，前面为水平半径，后面为垂直半径， 得到的是椭圆角。 radius 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角
单一属性
- border-top-left-radius: 半径; （左上）
- border-top-right-radius: 半径; （右上）
- border-bottom-right-radius: 半径; （右下）
- border-bottom-left-radius: 半径;（左下）
简写方法
- border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
- border-radius: 20px 40px 10px 20px; (左上角20px 右上角40px 右下角10px 左下角20px)
- border-radius: 20px 40px 10px; (左上角20px 右上角和左下角40px 右下角10px)
- border-radius: 20px 10px;(左上角和右下角20px 右上角和左下角10px)
- border-radius: 10px;(四个角10px)
/的属性值写法
- border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。
border-radius:50% 20% 40% / 20% 30%;
浏览器兼容
- Internet Explorer 8及以下版本浏览器不支持此属性
文字阴影
- CSS3中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影，垂直阴影，模糊距离，还有阴影的颜色：
属性值 简介 h-shadow 必要，水平阴影的位置，可以负值 v-shadow 必要，垂直阴影的位置，可以负值 blur 可选，模糊的距离 color 可选，阴影的颜色
多层阴影
- text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
- 注意：多阴影中，先写的阴影压盖在后写的阴影上。
/*可以多层阴影，按照顺序是水平位置，垂直位置，模糊程度，颜色*/
text-shadow: 3px 3px 3px #f00,
6px 6px 3px #0f0,
9px 9px 3px #00f;
文字阴影效果
盒子阴影
边框阴影
- box-shadow：
属性值 简介 h-shadow 必要，水平阴影的位置，可以负值 v-shadow 必要，垂直阴影的位置，可以负值 blur 可选，模糊的距离 color 可选，阴影的颜色 spread 可选，阴影的尺寸 inset 可选，将外部阴影转为内部阴影
多层阴影
- box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。
- 注意：多阴影中，先写的阴影压盖在后写的阴影上。
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid #0ff;
margin: 50px;
background-color: pink;
/* 边框阴影：水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 */
/* 注意：外部的边框阴影不需要进行设置，他是默认的，如果增加了outset值反而出现错误 */
/* box-shadow: 20px 20px 5px 20px #f00 inset; */
box-shadow: 20px 20px 5px #f00,
40px 40px 5px #0f0,
60px 60px 5px #00f;
}
<div class="box"></div>
效果图
过渡属性
- 属性名：transition
- 作用：在不使用flash和JavaScript的情况下，使用transition实现动画（过渡效果），当前元素只要有“属性”发生变化时即存在两种状态，之间可以实现平滑的过渡的动画效果。
transition: 过渡的属性 过渡的时间 运动曲线 延时时间;
单一属性写法
transition-property过渡的属性
- none表示没有属性过渡
- all表示所有变化的属性都过渡
- 属性名 使用具体的属性名，多个属性名中间用逗号分隔
时间
- 过渡时间：s为单位
- 延时时间：s为单位，0s也必须加单位
transition-timing-function 时间曲线
属性值与说明
属性值对应的贝塞尔曲线
.box{
width: 100px;
height: 100px;
background-color: pink;
/* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */
/* transition: all 2s ease-in 0s; */
transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s;
}
.box:hover {
width: 500px;
height: 400px;
}
效果演示
浏览器兼容
- IE10，Firefox，chrome和opera支持transition属性
- Safari需要前缀-webkit-
- IE9以及更早的版本，不支持transition属性
2D转换
- 属性名：transform
- 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
translate()位移
- 实现位移效果
- 书写语法：
值 说明 translate(x,y) x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负 translate(x) 只有一个数值，表示水平方向的位移
例子
scale()缩放
- 实现缩放效果
- 书写语法：
值 说明 scale(x, y) x,y分别为改变元素的宽度和高度的倍数 scale(n) 只有一个值，表示宽度和高度同时缩放n倍 scaleX(n) 改变元素的宽度 scaleY(n) 改变元素的高度
例子
rotate() 旋转
- 实现旋转效果
- 书写语法：
- rotate(数字deg)
- 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。
- 2D的旋转只有一个属性值。
-
注意：元素旋转后，坐标轴也跟着发生转变。 因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。
例子
skew() 倾斜
- 实现元素的倾斜
- 书写语法：
- transform: skew(数字deg,数字deg);
-
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0
例子
transform-origin属性
- 作用：设置调整元素的水平和垂直方向原点的位置
- 属性值：两个，中间用空格分开
属性值和说明
卡包案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 225px;
height: 150px;
border: 1px solid #000;
margin: 300px auto;
}
.box img {
position: absolute;
left: 0;
top: 0;
width: 225px;
height: 150px;
/* 设置公共的基准点 */
transform-origin: right top;
/* 过渡 */
transition: all 1s ease;
}
.box:hover img:nth-child(1) {
transform: rotate(60deg);
}
.box:hover img:nth-child(2) {
transform: rotate(120deg);
}
.box:hover img:nth-child(3) {
transform: rotate(180deg);
}
.box:hover img:nth-child(4) {
transform: rotate(240deg);
}
.box:hover img:nth-child(5) {
transform: rotate(300deg);
}
.box:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" >
<img src="images/2.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
<img src="images/5.jpg" >
<img src="images/6.jpg" >
</div>
</body>
</html>
卡包效果展示
3D转换
-
transform属性不只能2D转换，也可以制作3D立体转换效果，比普通的x，y轴还要多了一个z轴
示图
透视
- 让2D平面有3D立体感，是一种视觉体现
透视属性perspective
- 属性名：perspective
- 作用：设置在Z轴视线焦点的观察位置
- 属性值：像素值，数字越大，距离Z轴原点越远
- 注意：需要设置给3D变化元素的父级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 150px auto;
/* 透视 */
perspective: 500px;
}
.box img{
transition: all 1s ease;
}
.box img:hover {
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
效果图
3D旋转
-
属性值：
- 注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。
3D位移
-
属性值：
- 注意：属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移
transform-style属性
- 属性值：
flat：所有的子元素在2D平面呈现
preserve-3D：保留3D空间
一般来说，该属性设置给3D变换图形的父级元素
六边形案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 150px auto;
}
.stage{
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
/* 设置内部子元素在3D空间进行展示 */
transform-style: preserve-3d;
/* 透视 */
perspective: 5000px;
/* 过渡 */
transition: all 4s ease;
}
.stage:hover {
transform: rotateX(360deg) rotateY(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
.stage div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
font: bold 80px/200px "arial";
text-align: center;
}
.stage div:nth-child(1){
background-color: rgba(255,0,0,0.5);
transform: translateZ(100px);
}
.stage div:nth-child(2){
background-color: rgba(0,255,0,0.5);
transform: rotateX(90deg) translateZ(100px);
}
.stage div:nth-child(3){
background-color: rgba(0,0,255,0.5);
transform: rotateX(180deg) translateZ(100px);
}
.stage div:nth-child(4){
background-color: rgba(255,255,0,0.5);
transform: rotateX(270deg) translateZ(100px);
}
.stage div:nth-child(5){
background-color: rgba(255,0,255,0.5);
transform: rotateY(90deg) translateZ(100px);
}
.stage div:nth-child(6){
background-color: rgba(0,255,255,0.5);
transform: rotateY(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="box">
<div class="stage">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
效果
浏览器兼容
- IE10，Firefox，opera支持transform属性
- chrome，Safari需要前缀-webkit-
- IE9需要前缀-ms-
动画
- 步骤1：创建动画
- 步骤2：绑定动画
@keyframes规则
- 作用：创建动画
- 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
- 需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
@keyframes书写规则：
keyframes 动画名称{
动画过程
}
例如：
animation属性
- 需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。animation 属性用于对动画进行捆绑。
- 语法：
div {
animation:动画名称 过渡时间 速度曲线 动画次数 延时时间;
}
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置
单一属性列表
浏览器兼容
- IE10，Firefox，opera支持@keyframes规则和animation属性
- chrome和Safari需要前缀-webkit-
- IE9，以及更早的版本，不支持
案例（运动轨迹：正方形）
<!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: 200px auto;
background-color: skyblue;
animation: move 5s linear infinite;
}
.box p {
text-align: center;
}
@keyframes move {
0% {
transform: translateX(0);
}
25% {
transform: translateX(500px);
}
50% {
transform: translate(500px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box"><p>我是一个会动的盒子</p></div>
</body>
</html>
效果图
转为gif画质丢失，此图效果略差与代码无关
