多类名选择器 id选择器

最新推荐文章于 2025-04-01 16:57:53 发布

Fyp的博客

最新推荐文章于 2025-04-01 16:57:53 发布

阅读量579

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_43278772/article/details/84945333

版权

本文深入讲解了CSS中多类名选择器和id选择器的使用方法及特性，包括类名选择器的多重调用和id选择器的唯一性，帮助读者理解如何更有效地应用CSS进行网页样式设计。

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

1.多类名选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
      .red{
           color: red;
          }
      .font20{
           font-size:20px;
          }
    </style>
</head>
<body>
	
	<div class="red font20">多类名</div>  <!--在一个div里面只能有一个class属性-->   
	<div>多类名</div>
	<div>多类名</div>
	<div>多类名</div>
	<p class="red">多类名</p>
	<p>多类名</p>
	<p>多类名</p>
	<p class="red">多类名</p>
	<div>多类名</div>
</body>
</html>
<!--注意：
  1.样式显示效果跟html元素中的类名先后顺序没有关系，受css样式书写的上下顺序的影响
  2.各个类名中间用空格隔开
  3.类名选择器：<div class="nav">意味着这个div就是nav，nav也就是div
               <人  class="刘德华" class属于div，class是div具体化>
               我们想要把div找到，div{} nav{}
-->

多类名选择器
2.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       #last{
           color: pink;
            }
	</style>
</head>
<body>
	<div>id选择器</div>
	<div>id选择器</div>
	<div>id选择器</div>
	<div id="last" class="red">id选择器</div>
	<!--区别：
	    类选择器相当于人的名字,可以多次调用；
	    id选择器相当于身份证号，唯一的
	-->
</body>
</html>

id选择器