3. 新增CSS3 |
您所在的位置：网站首页 › css边框去重 › 3. 新增CSS3 |
3. 新增CSS3
|
css3的新特性:
一.css新增选择器:
1. 属性选择器:
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器: 语法: 标签名[属性名] {} 或 标签名[属性名=“属性值”] {} (属性值可以加引号可以不加引号 重点) /*属性选择器*/ /*意思是必须是input标签并且里面必须有value属性*/ input[value] { color: pink; }语法: 标签名[属性名^=“123”] (选择属性值以123开头的元素) /*选择属性值里面带有ico的元素*/ div[class^=ico] { width: 100px; height: 100px; border: 1px solid salmon; } /*被选中*/ /*被选中*/ /*被选中*/语法:标签名[属性名$=“123”] (选择属性值以123结尾的元素) 语法:标签名[属性名*=“123”] (选择属性值以里面有123的元素) 注意:属性选择器的权重是10 2.结构伪类选择器:结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素: 语法: E:first-child (搭配父元素中的第一个子元素): /* 1.选择ul里面的第一个孩子 */ ul li:first-child { border: 1px solid red; } 语法:E:last-child (选择父元素中第二个子元素): /* 1.选择ul里面的第一个孩子 */ ul li:last-child { border: 1px solid red; }语法: E:nth-child(n) (选择某个父元素的一个或多个特定的子元素) 值可以是数字: /* 1.选择ul里面的第2个孩子 */ ul li:nth-child(2) { border: 1px solid red; }值可以是关键字 even(偶数) odd(基数): 值可以是公式 例子: E:nth-child(n) E:nth-child(2n) E:nth-child(2n-1) 斑马纹: /* 所有的基数的孩子 */ ul li:nth-child(odd) { background-color: aliceblue; } /* 所有的偶数的孩子 */ ul li:nth-child(even) { background-color: bisque; }语法 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 /*效果: 我是小猪佩奇*/ /*权重是2*/ div::before { /*加在div的前面*/ content: "我"; /*content里面可以写 字体图标的编码 '\ea3e'*/ } div::after { /*加在div的后面*/ content: "小猪佩奇"; } 是 使用场景 (下拉列表) :效果图: 使用场景遮罩层: 效果图(鼠标经过):
![span""/span](span"./img/Snipaste_2022-10-18_09-33-35.png"/span)
清除浮动(原理就是使用伪元素在后面添加一个看不到的盒子,类似于额外标签法): * 
二. 盒子模型:
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宽度）
* {
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 （可以省略） 过渡 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; } 记住过渡的使用口诀,谁做过渡给谁加 进度条案例:原理:父盒子嵌套子盒子 进度条 .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%; } |
【本文地址】
今日新闻 |
推荐新闻 |