css新特性

已于 2022-03-12 15:15:10 修改
阅读量304 收藏
点赞数 2
文章标签： css css3 html
于 2022-03-12 15:04:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65878076/article/details/123443604
版权 
上章我们介绍了css的基础，内容，各个特点，现在我们一起看看新增的东西

一、css新增选择器

1.1层次选择器

E F:选择器E的所有后代F

E>F:选择E的子代F

E+F：选择E的相邻兄弟F（这里最好定义一个类选择器，或者id选择器）

E~F:选择E的所有兄弟F 不包括自己

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 后代选择器 E F */
			.box p{
				background-color: black;
			}
			/* 子代选择器 E>F */
			ul>li{
				background-color: pink;
			}
			/* 相邻兄弟选择器E+F */
			.one+p{
				background-color: yellow;
			}
			/* 通用兄弟选择器E~F */
			.one~p{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p class="one">1</p>
			<p>2</p>
			<p>3</p>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>

在这里插入图片描述

1.2层次选择器

	E[id]：选择具有Id属性的标签E
	E[id=“first”]:选择id为first的标签E
	E[class*=“links”]:选择class包含links的标签E
	E[href^="http"]：选择href以http开头的标签E
	E[href$="jpg"]：选择href以jpg结尾的标签E

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo a {
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				text-align: center;
				background: #aac;
				color: blue;
				font: bold 20px/50px Arial;
				margin-right: 5px;
				text-decoration: none;
			}
			
			/* 选择有id属性的a标签 */
			a[id]{
				background-color: red;
			}
			
			/* 选择id=first的a标签 */
			a[id="first"]{
				background-color: #0000FF;
			}
			
			/* 选择class包含links的标签a */
			a[class*="links"]{
				background-color: pink;
			}
			
			/* 选择href以http开头的标签a */
			a[href^="http"]{
				background-color:magenta;
			}
			/* 选择href以.jpg结尾的标签a */
			a[href$=".jpg"]{
				background-color:black;
			}
		</style>
	</head>
	<body>
		<p class="demo">
			<a href="http://www.baidu.com" class="links item first" id="first">1</a>
			<a href="" class="links active item" title="test website" target="_blank">2</a>
			<a href="sites/file/test.html" class="links item">3</a>
			<a href="sites/file/test.png" class="links item"> 4</a>
			<a href="sites/file/image.jpg" class="links item">5</a>
			<a href="efc" class="links item" title="website link">6</a>
			<a href="/a.pdf" class="links item">7</a>
			<a href="/abc.pdf" class="links item">8</a>
			<a href="abcdef.doc" class="links item">9</a>
			<a href="abd.doc" class="linksitem last" id="last">10</a>
		</p>
	</body>

在这里插入图片描述

1.3结构伪类选择器

	E F:first-chid：E的第一个孩子F(必须是第一个）
	E F:last-child：E的最后一个孩子F(必须是最后一个）
	E F:nth-chid(n) E的第n个孩子F
	E F:nth-child(even/odd)：选择E的偶数行F或则奇数行F
	div：empty 选择空元素
 **常用：**
	E F:first-of-type：E的第一个孩子类型F
	E F:last-of-type：E的最后一个孩子类型F      
	E F:nth-of-type(n) E的第n个孩子类型F
	E F:nth-of-type(even/odd)：选择E的偶数行类型F或则奇数行类型F
	F:not([class="active"])：选择除了class=active的元素F

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* wrapper的第一个孩子p */
			.wrapper p:first-child{
				background-color: green;
			}
			/* wrapper的最后一个孩子p */
			.wrapper p:last-child{
				background-color: green;
			}
			
			/* wrapper的第3个孩子p */
			.wrapper p:nth-child(3){
				background-color: green;
			}
			/* wrapper的偶数行p 2,4*/
			.wrapper p:nth-child(even){
				background-color: pink;
			}
			/* wrapper的奇数行p 1,3,5*/
			.wrapper p:nth-child(odd){
				background-color: red;
			}
			
			/* 3*0+1  3*1+1 */
			/* 1,4行变色 */
			.wrapper p:nth-child(3n+1){
				background-color: blue;
			}
			/* ========================================= */
			.list li:first-of-type{
				background-color: red;
			}
			.list li:last-of-type{
				background-color: red;
			}
			.list li:nth-of-type(3){
				background-color: red;
			}
			.list li:nth-of-type(even){
				background-color: mediumvioletred;
			}
			/* 选择空元素div */
			div:empty{
				height: 50px;
				border: 1px solid;
				background-color: #000000;
			}
			
			/* 否定选择器:not([class="active"] )*/
			/* 选择除了class=active的p元素 */
		.wrapper p:not([class="active"]){
				border: 3px solid;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<!-- <h3>666</h3> -->
			<p class="active">1</p>
			<p class="active">2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</div>
		<div></div>
		<ul class="list">
			<h3>6666</h3>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

在这里插入图片描述

1.4、动态伪类选择器

a:link：链接访问时
a:visited：访问后
a:hover：悬浮离开
a:actived：激活时
:focus  光标聚焦时

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 动态伪类:a:link->a:visited->a:hover->a:active  :focus焦点 */
			#user:focus{
				/* border: 3px dotted red; */
				outline: none;
				border: none;
				background-color: pink;
				text-indent: 2em;
			}
			
			/* UI元素伪类选择器::checked  :disabled  :enabled */
			/* 选择被选中的单选框 */
			input[type="radio"]:checked{
				width: 20px;
				height: 20px;
			}
			/* 选择禁用的文本框 */
			input[type="text"]:disabled{
				background-color: blue;
			}
			/* 选择可用的文本框 */
			input[type="text"]:enabled{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="user" value="" /><br>
		<input type="radio" name="gender" id="" value="female" checked/>女
		<input type="radio" name="gender" id="" value="male" />男<br>
		<input type="text" name="" disabled value="" />
	</body>

在这里插入图片描述

二、css新增样式

1.1、边框：

	border-radius:圆角
	border-image:边框背景图片

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 300px;
				height: 300px;
				background-color: red;
				/* 圆角半径:顺时针上右下左 */
				/* border-radius:100px/80px 80px 60px 40px; */
				/* border-radius:20px; */
				/* 圆 */
				/* border-radius:150px; */
				border-radius: 50%;
			}

			.box2 {
				width: 300px;
				height: 150px;
				background-color: red;
				/* border-radius: 150px 150px 0 0; */
				border-radius: 0 0 150px 150px;
			}

			/* transform 延哪个轴旋转 */
			.box3 {
				width: 150px;
				height: 300px;
				background-color: red;
				border-radius: 0 150px 150px 0;
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>

在这里插入图片描述

1.2、盒子：

	box-sizing:border-box 拯救布局
	box-shadow：color x y 模糊半径 扩展半径 [inset]
	标准盒:width+padding+border+margin
	怪异盒:（conten+padding+border)(width)+margin

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 	标准盒模型:content(width)+padding+border+margin
			怪异盒模型:(content+padding+border=width)+margin */
			.box{
				width: 300px;
				height: 300px;
				background-color: red;
				padding: 50px;
				/* border: 10px solid; */
				/* 拯救布局 */
				box-sizing: border-box;  /* 怪异盒模型 */
			/* 	box-sizing: content-box; 标准盒模型,默认 */
			
			    /* 盒子阴影:box-shadow:阴影颜色 X轴 y轴 模糊半径 扩展半径 内阴影(inset) */
				box-shadow:black 15px 15px 20px 10px inset;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>

在这里插入图片描述

1.3、文本：

    text-shadow:color x y 模糊半径
	@font-face{font-family:name;src:url()},自定义字体

1.4、背景：

	background-image:url(),url()    多重背景图片
	linear-gradient(to top left,color1,color2 20%,...)   线性渐变
	radial-gradient(circle  size  at center,color1,color2 20%,...)    径向渐变
	repeating-linear-gradient/repeating-radial-gradient   重复渐变

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 多重背景图片 */
			.box1{
				width: 300px;
				height: 200px;
				background:url(img/chui.png),url(img/poll.png);
				background-repeat:no-repeat,no-repeat;
				background-position: 0 0,50px 0;
			}
			
			/* 线性渐变 */
			.box2{
				width: 300px;
				height: 300px;
				/* linear-gradient(渐变的方向,渐变的颜色)
				渐变的方向:to bottom left */
				background-image:linear-gradient(to top right,red 0%,yellow 30%,blue 80%,green);
				background-image:-moz-linear-gradient(to top right,red 0%,yellow 30%,blue 80%,green);
				background-image:-webkit-linear-gradient(to top right,red 0%,yellow 30%,blue 80%,green);
				background-image:-ms-linear-gradient(to top right,red 0%,yellow 30%,blue 80%,green);
				/* 重复渐变 */
				/* background-image:repeating-linear-gradient(to top right,red 0%,yellow 10%,blue 20%,green 30%) */
				
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>

在这里插入图片描述

2.1、2d变形transform:

	translate(x,y)  位移,单位px
	skew(x,y) 倾斜，单位deg
	rotate(x,y,z),旋转，单位deg
	scale(x,y) 缩放，没有单位 倍数
	perspective：200px  透视，父级
	transform-origin:bottom/top/center/left/right/30% 50%   旋转轴心
	backface-visibility:hidden   背面不可见

因为这里是一个动图效果，感兴趣的小伙伴可以把代码复制一下然后鼠标悬浮到红色快上面看看效果，可以来回试试换换哦！

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				perspective: 1000px;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
			
				/* 过度效果 */
				transition: all 2s;
			}
			.box:hover{
				/* 2d位移 */
				/* transform: translateX(300px);
				transform: translateY(300px);
				transform: translate(300px); => translateX(300px)
				transform: translate(300px,300px); */
				/* 2d缩放 */
				/* transform: scaleX(2);
				transform: scaleY(2); */
				/* transform: scale(2);  =>transform: scale(2,2) */
				/* transform: scale(2,0.5); */
				/* 2d旋转 */
				/* transform: rotateX(180deg); */
				/* transform: rotateY(180deg);
				transform: rotateZ(180deg); */
				/* transform: rotate(180deg);=>transform: rotateZ(180deg); */
				/* 2d倾斜 */
				/* transform: skewx(90deg); */
				/* 综合设置： */
				transform: translate(300px,300px)  scale(0.5) rotate(180deg);
			}
			
		</style>
	</head>
	<body>
		<div class="box">帅哥</div>
	</body>

2.2、过渡：

transtion:all(过渡属性) 时间 速度 延迟时间

2.3、关键帧:

	  @keyframe name{from{}  to{}}
	@keyframe name{0%{}  50%{}  100%{}}

2.4、动画:

		animation：name  时间 速度  延迟时间  播放次数(infinite无限)    播放是否反向    最后停留位置
	   animation-play-state: paused;  暂停播放
composed person
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3新特性
qq_43276642的博客
05-20 3130
1.选择器： 伪元素选择器 ::before ::after ::first-line ::first-letter ::section 伪类选择器 .list>li:first-child 选中第一个子元素 .list>li:last-child 选中最后一个子元素 .list>li:nth-child(n) 选中第五个子元素 .list>li:nth-child(odd) 选中偶数行 .list>li:nth-child(...
css3新特性
weixin_44992737的博客
06-19 4439
css3新特性详解
css的新特性
weixin_65307650的博客
09-04 292
它允许将页面分割为行和列，控制项目在网格中的位置和大小，实现灵活的网格布局。13. 过滤效果：CSS3的filter属性允许应用各种图形效果到元素上，如模糊、亮度调整、对比度调整、灰度化、色彩反转等，为图像和元素添加特殊的视觉效果。这些是CSS3的一些重要特性，现在各浏览器兼容性也可以，很好的丰富了页面的展示，像很多不难的动画效果能用css3实现的话就不用劳烦js了。5. 过渡：通过使用transition属性，可以实现在元素状态改变时平滑地过渡属性值，如颜色、大小、位置等，提供更丰富的动画效果。
2024 年 10 个很实用的 CSS 新特性，你不一定知道！
最新发布
前端开发博客
06-23 1103
CSS 既简单又复杂。刚开始学起来很容易，但 CSS 不断更新，设计方法也在变化，总有新的功能和特性出现来解决旧问题。这可真是个让人又爱又恨的家伙！最近几年，CSS 涌现出很多新特性，让网页设计变得更强大、更灵活。今天就来聊聊一些比较实用，并且已经得到广泛支持的新特性，帮助你提升网页设计的技能，做一个更牛的 web 设计师！aspect-ratio: 轻松控制元素比例aspect-ratio属性...
CSS的6个新特性
qq_37916164的博客
03-02 3984
容器查询@container类似于媒体查询@media，区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。
CSS 新特性总结
薛定谔的猫-前端领域
05-18 1446
CSS 伪类选择器 :is() 和 :where() :is() 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素，其优先级是由它的选择器列表中优先级最高的选择器决定的，列表值中不能使用伪元素。 :where()将会选择所有能被该选择器列表中任何一条规则选中的元素，其优先级为 0。 :not() 和 :has() :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。 :has() 至少匹配一个满足参数选择器的元素，而且能匹配父元素
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
深入了解CSS3新特性
02-26
这些CSS新特性在现阶段可以说都是非常强大和完善的，您只需要加入几行简单的CSS代码便可以实现出一系列令人眼前一亮的效果，这比我们之前用JavaScript去模拟这样的效果要好得多，不仅降低了复杂度，变得易维护，在...
1.07 css3新特性
10-07
本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，...
CSS3-HTML5新特性介绍：由CSS3-HTML5制作的网页版PPT
10-30
HTML5 Rocks是由谷歌牵头的开源的web项目。有丰富的html5的demo。 基于html5 rocks作的CSS3介绍，是PPT风格的网页，大家可以参考。 HTML5 Rocks官网上有更丰富的关于HTML5+CSS3+JS的介绍，大家可以自己到官网下载。
Web-前端html+css从入门到精通 234. CSS新特性之scrollbar.zip
05-23
随着技术的不断发展，CSS不断引入新的特性和功能，使开发者能够创建更加丰富、交互性更强的用户界面。本教程重点讲解的是CSS新特性中的滚动条（scrollbar）样式定制，这是CSS3中一个非常实用且具有视觉吸引力的功能...
24个CSS新特性，不容错过！，如何学好web前端开发
2401_84097820的博客
04-03 762
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
2023 年 CSS 新特性大盘点
奇舞周刊
12-28 438
2023年，CSS 迎来了一系列令人兴奋的新特性，这些特性不仅增强了样式和布局的能力，还提升了开发者的效率和用户体验。本文将盘点并深入解析这些新特性，带你领略 CSS 的魅力！全文概览：基础功能三角函数复杂的nth-*选择器@scope嵌套子网格排版Initial-lettertext-wrap颜色高级色彩空间color-mix 函数相对颜色语法响应式设计容器大小查询容器样式查询:has() 选择...
24个CSS新特性，不容错过！
2401_83817769的博客
03-29 776
外链图片转存中…(img-JOB6VOx5-1711646618644)][外链图片转存中…(img-OnMOB9b6-1711646618645)]
CSS3 新特性探索：让你的网页设计更加炫酷
m0_73442777的博客
06-17 501
探索CSS3新特性，为你的网页设计带来前所未有的魅力！在这篇文章中，我们将带你了解CSS3的最新功能和技术，包括强大的选择器、灵活的布局模块、动画效果和过渡、渐变和阴影效果、响应式设计以及更多。你将学会如何利用这些新特性创建出令人惊叹的用户界面，实现动态和交互式的效果，以及为不同设备和屏幕尺寸进行优化。无论你是新手还是有经验的开发者，这篇文章都将帮助你深入了解CSS3的新特性，并启发你在网页设计中展现无限创意。准备好探索CSS3的奇妙世界了吗？让我们一起领略CSS3的魅力，为你的网页注入全新的活力！
css3新增属性有哪些？css3中常用的新增属性
lzfengquan的博客
07-09 9418
** 一、css3新增边框属性 ** 1、css3新增属性之border-color：为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0000ff; } 需要注意：“border-width” 属性如果单独使用的话是不会起作用的。请首先使用 “border-style” 属性来设置边框。 2、css3新增属性之border-image：图片边框 div { -webkit-border-image:url(border.png) 30 30 r
2024年，你需要了解下这 12 个现代化 CSS 新属性
前端达人
01-26 1050
有时候，提升你的应用程序的CSS只需要一个简单的一行升级或增强！了解这12个属性，开始将它们融入到你的项目中，享受减少技术债务、去除JavaScript，以及为用户体验赢得轻松的胜利。1、aspect-ratio你是否曾为视频嵌入时的宽高比感到困扰？例如，我们常见的高清视频宽高比是16:9。过去，我们可能需要使用一些复杂的方法来实现这个比例，比如大家熟悉的“padding hack”。但现在，有了...
探索CSS3：新特性与实战教程
"CSS3教程和css3新特性专题" CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了一系列的新特性，极大地扩展了网页设计的可能性。CSS3不仅提供了更加丰富的样式控制，还允许设计师实现更复杂的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值