CSS——10.类选择器

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.zxw{
				color: red;
				font-weight: 600;
			}
			.abc{
				font-size: 30px;
			}
		</style>
		
	</head>
	<body>
		<!--类选择器:-->
			<!--1.class属性是标准属性,任何元素都可以有class属性。-->
			<!--2.使用class(类)选择器时,要在class值前加上"."-->
			<!--3.class选择器可以被多个元素共同使用,不同元素可以有相同的class值-->
			<!--4.同一个元素可以有多个类名,要使用空格隔开-->
			<!--<p class="zxw abc">我爱学习2</p>该p元素标签 有俩个类名分别为类名1:zxw abc。类名2:abc-->
			<!--5.在实际开发中尽量使用类选择器,因为类选择器就是给CSS使用的,而id是给JS使用的-->
			
		
			<div>
				<div class="zxw">我爱学习1</div>
				<p class="zxw abc">我爱学习2</p>
				<span class="zxw">我爱学习3</span>
			</div>
			
			
			
			<strong class="abc">我爱学习4</strong>
		
	</body>
</html>

将块标签中的所有元素都加上某种样式,就可以用class 来进行样式添加,这种情况类选择器是最方便的

相关推荐
我星期八休息几秒前
Redis 的原理和使用(2)
前端·数据库·redis·python·mysql·缓存·bootstrap
Java后端的Ai之路几秒前
19-ReactJS最佳实践
前端·react.js·前端框架
溪语流沙17 分钟前
【Web全栈进阶】文件上传与图片展示:早报站的第一张图片
前端·vue.js·python·fastapi
alwaysrun20 分钟前
Web之wasm-bindgen详解
前端·wasm·bindgen
鬼手点金30 分钟前
如何选择模型
java·前端·人工智能·git·深度学习
恋猫de小郭31 分钟前
Dart 3.15 新特性:this 终于支持类型提升了
android·前端·flutter
IT_陈寒1 小时前
Vue开发实战:从入门到精通
前端·人工智能·后端
znnnk1 小时前
2026 前端工程化新纪元:Rust 重塑工具链,AI Agent 接管流水线
前端·人工智能·rust
王大师王文峰1 小时前
HTML 入门到进阶:语义化标签、表单与多媒体一篇打通【语义化布局、表单校验、video/audio、Canvas、无障碍与 SEO】
前端·css·node.js·html·css3·jquery·html5
风骏时光牛马1 小时前
AI_Coding:智能代码创作助手
前端