网页设计：CSS的选择器和样式

最新推荐文章于 2024-04-22 21:24:38 发布

原创最新推荐文章于 2024-04-22 21:24:38 发布 · 338 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS中的标签选择器、类选择器和ID选择器的用法，以及它们在HTML文档中的应用实例。同时，阐述了样式优先级的概念，包括行内样式、内部样式和外部样式的权重差异，帮助理解如何控制样式的应用顺序。

选择器

标签选择器、类选择器、ID选择器

标签选择器：直接应用到HTML标签
在这里插入图片描述

类选择器：可以在页面中多次使用
在这里插入图片描述

ID选择器：在同一个页面中只能使用一次
在这里插入图片描述
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				color: red;
			}
			/*ID选择器*/
			#idName{
				background-color: #55D7E4;
			}
			/*类选择器*/
			.className{
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<p>标签选择器</p>
		<ul id="idName">
			<li >桌面</li>
			<li>控制面板</li>
			<li>我的电脑
				<ul type="circle" class="className">
					<li>本地磁盘C</li>
					<li>本地磁盘D</li>
					<li>本地磁盘E</li>				
				</ul>
			</li>
		</ul>
	</body>
</html>