css五大选择器

最新推荐文章于 2021-12-03 09:37:03 发布

白芍爱上蒲公英

最新推荐文章于 2021-12-03 09:37:03 发布

阅读量155

点赞数

分类专栏： html&&css

本文链接：https://blog.csdn.net/weixin_46381608/article/details/107311034

版权

html&&css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

层级选择器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<style>
			div p{
				font-size: 30px;
				color: green;
			}
		</style>
	</head>

	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			<p>
				逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
			</p>
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
		<p>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66
		</p>
	</body>

</html>

在这里插入图片描述
属性选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			input[type='text']{
				background-color: red;
			}
			
			
			input[type='password']{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		用户名；<input type="text" name="username"/><br />
		密码：<input type="password" name="password"/>
	</body>
</html>

在这里插入图片描述
元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

在这里插入图片描述
类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.div2{
				font-size: 30px;
				color: gold;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>

在这里插入图片描述
id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#div5{
				font-size: 30px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div class="div2">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
		</div>
		<div id="div5">
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
	</body>
</html>