网页——CSS选择器&自定义动画

最新推荐文章于 2024-04-24 10:57:13 发布

panda_burn

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量293

点赞数 1

分类专栏：新手HTML

本文链接：https://blog.csdn.net/panda_burn/article/details/92120540

版权

本文详细介绍了CSS选择器的各种类型，包括类选择器、标签名选择器、选择器优先级、伪类选择器等，并探讨了样式中的背景、边框、内间距、动画效果等。此外，还深入讨论了自定义动画的实现和应用，如漂浮广告和透明度控制。

摘要由CSDN通过智能技术生成

一、选择器
（一）类选择器：一次可以控制多个标签将多个标签的共性属性，抽取到类选择器中将个性属性，放到id选择器中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">	
			.hehe{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				margin-top: 20px;
			}
			#div1{
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="hehe">
		</div>
		<h1 class="hehe">asdfsadf </h1>
		<div id="div2" class="hehe">
		</div>
		<div id="div3" class="hehe">
		</div>
		<div id="div4" class="hehe">
		</div>
	</body>
</html>

（二）标签名选择器：可以根据标签名称，选择多个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 200px;
				background: #FF0000;
				margin-top:20px ;
			}
			#div1{
				background: yellow;
			}
			h1{
				color: #0000FF;
			}
			ul{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			divddfd
		</div>
		<div id="div2">
			divddfd
		</div>
		<h1>asdfsadf</h1>
		<h1>asdfsadf</h1>
		<ul>
			<li>asdfsadf</li>
			<li>asdfsadf</li>
			<li>asdfsadf</li>
		</ul>
		<ul>
			<li>asdfsadf</li>
			<li>asdfsadf</li>
			<li>asdfsadf</li>
		</ul>
	</body>
</html>

（三）选择器优先级：
当多个选择器在控制同一个标签时，如果属性不冲突，多个属性叠加在一起生效
如果多个选择器，控制的属性有冲突那么就根据选择器的优先级来区分
内联样式>id选择器>class选择器>标签名选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background: red;
			}
			.hehe {
				border: 1px black solid;
				margin-top: 10px;
				background: #00FFFF;
			}
			#div1 {
				background: blue;
			}
			#div2 {}
			#div3 {}
		</style>
	</head>
	<body>
		<div id="div1" class="hehe" style="background: #FFFF00;">
		</div>
		<div id="div2" class="hehe">
		</div>
		<div id="div3" class="hehe">
		</div>
	</body>
</html>

（四）包含选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* li{
				color: #00FFFF;
			} */
			/* ul #last{
				color: red;
			} */
		/* 	body ul li {
				color: #9ACD32;
			} */
			body #aa li{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>asdfasfd</li>
			<li>asdfasfd</li>
			<li id="last">asdfasfd</li>
		</ul>
		<ul>
			<li>asdfasfd</li>
			<li>asdfasfd</li>
			<li id="last">asdfasfd</li>
		</ul>
		<ul id="aa">
			<li>asdfasfd</li>
			<li>asdfasfd</li>
			<li id="last">asdfasfd</li>
		</ul>
	</body>
</html>

（五）并列选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ol,#one,h1,b{
				color: red;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>abc</li>
			<li>abc</li>
		</ol>
		<ul id="one">
			<li>asdfsadf</li>
		</ul>
		<ul>
			<li>asdfsadf</li>
		</ul>
		<h1>asdfdsaf</h1>
		<b>asdfasfadfa</b>
	</body>
</html>

（六）通配符选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* *{
				color: #00FFFF;
				font-size: 100px;
				margin-top: 20px;
			} */
			#div1 *{
				color: #9ACD32;
			}	
		</style>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>asdfasf</li>
			</ul>
			<h1>abc</h1>
			<span id="">
				asdfdsaf
			</span>
		</div>
		<div id="div2">
			<h1>第二个</h1>
		</div>
	</body>
</html>

（七）伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中 hover active 这两种状态对其他标签也生效

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link {
				color: red;
				/* 去掉超链接的下划线 */
				text-decoration: none;
			}
			a:hover {
				color: #FFFF00;
				text-decoration: none;
			}
			a:active {
				color: brown;
				text-decoration: none;	
			}
			a:visited {
				color: burlywood;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="http://www.163.com" style="font-size: 50px;">百度一下</a>
		<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
		<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
		<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
		<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
		<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
	</body>
</html>

最低0.47元/天解锁文章

panda_burn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页——CSS选择器&自定义动画

四、选择器（一）类选择器：一次可以控制多个标签将多个标签的共性属性，抽取到类选择器中将个性属性，放到id选择器中。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&gt...
复制链接

扫一扫