CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_37609825/article/details/83243492

本文深入讲解CSS中的元素选择器、ID选择器、类选择器及其优先级，通过实例演示如何改变网页元素的颜色，适合初学者掌握CSS基本选择器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.元素选择器

把<span>标签的内容都改成蓝色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color:blue;
			}
		</style>
	</head>
	<body>
		<span>讲完这个内容大家就可以下课了</span>
		<span>讲完这个内容大家就可以下课了</span>
		<span>讲完这个内容大家就可以下课了</span>
		<span>讲完这个内容大家就可以下课了</span>
	</body>
</html>

2.ID选择器

将ID为div1的元素改为红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 
			 #ID的名称{
				  属性名称:属性的值;
				  属性名称:属性的值;
				}

			 注意：ID必须是唯一的
			 * */
			#div1{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<!--请将JAVAEE颜色改成红色-->
		<div id="div1">JAVAEE</div>
		<div>IOS</div>
		<div>ANDROID</div>
		
	</body>
</html>

3.类选择器

把class="shuiguo"的元素改成黄色 class="shucai"的元素改成绿色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			.类的名称{
			   属性名称:属性的值;
			  	属性名称:属性的值;
			}
		-->
		<style>
			.shuiguo{
				color: yellow;
			}
			.shucai{
				color: green;
			}
		</style>
	</head>
	<body>
		<!--
			请将水果类,改成黄色
			蔬菜类改成绿色
		-->
		<div class="shuiguo">香蕉</div>
		<div class="shucai">黄瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*元素选择器*/
			div{
				color: red;
			}
			/*类选择器*/
			.chifan{
				color: deeppink;
			}
			
			/*ID选择器*/
			#div1{
				color: greenyellow;
			}
			
			/*
			 按照选择器搜索精确度来编写:
			 	行内样式 > ID选择器 > 类选择器  > 元素选择器
			 */
			
			
			
			.first{
				color: green;
			}
			
			
			.second{
				color: blue;
			}
			
			/*就近原则*/
		</style>
	</head>
	<body>
		<!--<div class="chifan" id="div1" style="color: goldenrod;">扩展完,就可以去吃饭啦!</div>-->
		
		<div class="second first ">讲完这个真的可以去吃饭啦!</div>
	</body>
</html>