CSS——基本选择器

最新推荐文章于 2022-10-26 20:27:52 发布

MDeleter

最新推荐文章于 2022-10-26 20:27:52 发布

阅读量77

点赞数

分类专栏： Web 文章标签： css elementui sass

本文链接：https://blog.csdn.net/MDeleter/article/details/122850172

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*基本选择器下的元素选择器
			 获取页面上所有该类元素*/
			h1{
				color: red;
			}
			i{
				color: blue;
			}
			/*
			 应用场合：不同类型标签要使用相同类型
			 使用类选择器：*/
			.mycls{
				color: green;
			}
			/*id选择器：
			 可以定位唯一的一个元素
			 不同标签可以使用相同id，但通常会人为区分*/
			#myid{
				color: yellow;
			}
		</style>
	</head>
	<body>
		
		<h1>我是<i>一个</i>标题</h1>
		<h1 class="mycls">我是一个标题</h1>
		<h1>我是一个标题</h1>
		<h2 class="mycls">我是h2标题</h2>
		<h2>我是h2标题</h2>
		<h2 id="myid">我是h2标题</h2>
	</body>
</html>

优先级：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.mycls{
				color: red;
			}
			#myid{
				color: yellow;
			}
			h1{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<h1 class="mycls" id="myid">我是标题</h1>
	</body>
</html>

div/span标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*div为块级元素
			 span 属于行内元素无换行效果*/
			div{
				border: 1px red solid;
			}
			span{
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<div>马士兵</div>
		<div>马士兵</div>
		<span>马士兵</span>
		<span>马士兵</span>
		<span>马士兵</span>
	</body>
</html>

关系选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*关系选择器：
			 	后代选择器：只要是这个元素的后代，样式都会发生变化
			 	
			 	*/
			 	
			div>h1{
				color: red;
			}	
			span>h1{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<h1>这是标题</h1>
			<span>
				<h1>这是标题</h1>
				<h1>这是标题</h1>
				<h1>这是标题</h1>
				<h1>这是标题</h1>
				<h1>这是标题</h1>
			</span>
		</div>
	</body>
</html>

属性选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*属性选择器*/
			input[type="password"]{
				background-color: red;
			}
			input[type="text"][value="zhaoss"]{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<form>
			用户名：<input type="text" value="zhaoss" />
			用户名2：<input type="text" value="zhaoss2" />
			密码：<input type="submit" value="123123"/>
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

伪类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.mycls:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 class="mycls">我是标题</h1>
	</body>
</html>

超链接：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*设置静止状态*/
			a:link{
				color: yellow;
			}
			/*设置鼠标悬浮状态*/
			a:hover{
				color: red;
			}
			/*设置触发状态*/
			a:active{
				color: blue;
			}
			/*设置完成状态*/
			a:visited{
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="index.html">超链接</a>
	</body>
</html>