CSS笔记1：基础选择器_css基础选择器笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46037153/article/details/109742192

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		
		<!-- css选择器 -->
	<!-- 	1.基础选择器 ————标签选择器，类选择器，id选择器，通配符选择器
		2.复合选择器
		 -->
	</head>
	<style>
		/* 1.标签选择器 */
		p {
			color: green;
		}
			
		div {
			color: red;
		}
		
		/* 2.类选择器口诀:样式点定义 结构类class调用 一个或多个 开发最常用 */
		.red{
			color: red;
			}
			
			
			
		.blue{
			width: 100px;
			height: 100px;
			background-color: blue;
			}
		.yellow{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		
		
		
		
		.font35{
			font-size: 35px;
			}
		
		
		
		
		.box{
			width: 100px;
			height: 100px;
			font-size: 35px;
			}
		.blue1{
				
				background-color: blue;
				}
		.yellow1{
				
				background-color: yellow;
			}
			
			
			/* !-- ///3.id选择器  */
			/* 口诀:样式#定义 结构id调用 只能调用一次 别人切勿使用 */
		#pink{
				color: pink;
			}
			
			/* 4.通配符选择器 */
			/* 这里把html div span li等等的标签全部改成红色 （了解）*/
		* {
				color: red;
				
			}
				
			
	</style>
	<body>
		<!-- //1.标签选择器 -->
		<p>男生</p>
		<p>男生</p>
		<p>男生</p>
		<div>女生</div>
		<div>女生</div>
		<div>女生</div>
		
		<!-- 2.类选择器 -->

		<ul>
			<li class="red">春眠不觉晓</li>
			<li>春眠不觉</li>
			<li>春眠不</li>
			<li>春眠</li>
			<li>春</li>
		</ul>
		
		<!-- 例：用div布置蓝黄蓝三个格子 -->
		<div class="blue"></div>
		<div class="yellow"></div>
		<div class="blue"></div>
		
		
		<!-- 类选择器————多类名 ，中间右空格隔开-->
		
		<div class="red font35">刘德华</div>
		
		
		<!-- 使用多类名类选择器重新部署三个div盒子 -->
		<div class="box blue1">蓝色</div>
		<div class="box yellow1">黄色</div>
		<div class="box blue1">蓝色</div>
		
		<!-- //3.id选择器 -->
		
		<div id="pink">迈克尔 杰克逊</div>
		
		
		<!-- /4.通配符选择器 -->
		
		<div>我的</div>
		<span>你的</span>
		<ul>
			<li>还是我的</li>
		</ul>
		
		
		
	</body>
</html>