css3的新特性:
一.css新增选择器:
1. 属性选择器:
-
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器:
-
语法: 标签名[属性名] {} 或 标签名[属性名=“属性值”] {}
(属性值可以加引号可以不加引号 重点)
/*属性选择器*/
<style>
/*意思是必须是input标签并且里面必须有value属性*/
input[value] {
color: pink;
}
</style>
</head>
<body>
<input type="text" value="请输入用户名:">
<input type="text">
</body>
-
语法: 标签名[属性名^=“123”]
(选择属性值以123开头的元素)<style> /*选择属性值里面带有ico的元素*/ div[class^=ico] { width: 100px; height: 100px; border: 1px solid salmon; } </style> </head> <body> <div class="ico1"></div> /*被选中*/ <div class="ico2"></div> /*被选中*/ <div class="ico3"></div> /*被选中*/ <div></div> </body> -
语法:标签名[属性名$=“123”]
(选择属性值以123结尾的元素) -
语法:标签名[属性名*=“123”]
(选择属性值以里面有123的元素)
注意:属性选择器的权重是10
2.结构伪类选择器:
-
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素:
-
语法: E:first-child
(搭配父元素中的第一个子元素):<style> /* 1.选择ul里面的第一个孩子 */ ul li:first-child { border: 1px solid red; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> -
- 语法:E:last-child
(选择父元素中第二个子元素):
<style> /* 1.选择ul里面的第一个孩子 */ ul li:last-child { border: 1px solid red; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> - 语法:E:last-child
-
语法: E:nth-child(n)
(选择某个父元素的一个或多个特定的子元素)值可以是数字:
<style> /* 1.选择ul里面的第2个孩子 */ ul li:nth-child(2) { border: 1px solid red; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div></div> </body> -
值可以是关键字 even(偶数) odd(基数):
-
值可以是公式
<注意这里面必须是n不能是其他的字母 从0开始计算>例子: E:nth-child(n)<选择所有的孩子>E:nth-child(2n)<选择偶数孩子>E:nth-child(2n-1)<选择基数的孩子>斑马纹:
<style> /* 所有的基数的孩子 */ ul li:nth-child(odd) { background-color: aliceblue; } /* 所有的偶数的孩子 */ ul li:nth-child(even) { background-color: bisque; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div></div> </body> -
语法 E:first-of-type {}
(选择第一个) -
语法 E:last-of-type {}
(选择最后一个) -
语法 E:nth-of-type(n) {}
(选择任意一个 里面的值可以是公式)
E:nth-child(n)与 E:nth-of-type(n) {} 区别：
- nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
3. 新伪元素选择器:
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
注意:
-
before 和 after 创建一个元素，但是属于
行内元素<不能设置宽度高度,可以转换模式> -
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
-
语法： element::before {}
-
before 和 after 必须有
content属性 -
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
-
伪元素选择器和标签选择器一样，
权重为 1/*效果: 我是小猪佩奇*/ <style> /*权重是2*/ div::before { /*加在div的前面*/ content: "我"; /*content里面可以写 字体图标的编码 '\ea3e'*/ } div::after { /*加在div的后面*/ content: "小猪佩奇"; } </style> </head> <body> <div>是</div> </body>
- 使用场景 (下拉列表) :
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*字体声明:*/
@font-face {
font-family: 'icomoon'; /*名称通常来说是自己取的*/
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
font-size: 3px;
content: '\ea3e'; /*里面也可以使用编码 '\ea3e'*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
使用场景遮罩层:
效果图(鼠标经过):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>土豆网小案例</title>
<style>
.tudo {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudo img {
width: 100%;
height: 100%;
}
.tudo::before {
/*隐藏遮罩层*/
content: '';
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/arr.png) rgba(0, 0, 0, .4) no-repeat center;
}
/*当我们鼠标经过.tudo 显示mask*/
.tudo:hover::before{
display: block; /*显示元素*/
}
</style>
</head>
<body>
<div class="tudo">
<img src="./img/Snipaste_2022-10-18_09-33-35.png" alt="">
</div>
</body>
</html>
-
清除浮动(原理就是使用伪元素在后面添加一个看不到的盒子,类似于额外标签法):
*
二. 盒子模型:
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变:
- 可以分成两种情况：
- box-sizing: content-box 盒子大小为
width + padding + border（以前默认的） - box-sizing: border-box 盒子大小为
width 如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
- box-sizing: content-box 盒子大小为
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
1.滤镜filter:
-
filter CSS属性将模糊或颜色偏移等图形效果应用于元素:
-
语法:filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊
img { /*blur是一个函数数值越大图像越模糊*/ filter: blur(5px); }
2. calc 函数:
-
calc() 此CSS函数让你在声明CSS属性值时执行一些计算:
-
语法: ***: calc(100%-80px); 括号里面可以使用 + - * / 来进行计算
div { width: calc(100% - 80px);/*div盒子比他的父亲小80px*/ }
3. 过渡:
-
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
-
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态,我们现在经常和 :hover 一起 搭配使用。
-
语法: transition: 要过渡的属性 花费时间 运动曲线 何时开始;
-
属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
-
花费时间： 单位是 秒（必须写单位） 比如 0.5s -
运动曲线： 默认是 ease (逐渐慢下来) <可以省略>,linear (匀速),ease-in (加速),ease-out (减速),ease-in-out(先加速后减速)
-
何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
<title>过渡</title> <style> div { width: 200px; height: 100px; background-color: pink; /* transition: width .5s ease 0s,height .5s ease 1s; */ transition: all 0.5s; } div:hover { width: 400px; height: 200px; } </style> </head> <body> <div></div> </body> -
记住过渡的使用口诀,谁做过渡给谁加
进度条案例:
原理:父盒子嵌套子盒子
<title>进度条</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
}
.bar-in {
width: 50%;
height: 100%;
background-color: red;
transition: all 2s;
}
.bar:hover .bar-in {
border-radius: 7px;
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar-in"></div>
</div>
</body>
2087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
