HTML5学习_day01(4)--css内部样式之选择器

最新推荐文章于 2022-05-28 10:37:35 发布

woaiwanshumen

最新推荐文章于 2022-05-28 10:37:35 发布

阅读量443

点赞数

分类专栏： HTML5零基础学习笔记文章标签： html5

本文链接：https://blog.csdn.net/woaiwanshumen/article/details/52598879

版权

HTML5零基础学习笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中三种主要的CSS选择器：标签选择器、类（class）选择器和ID选择器。详细阐述了它们的语法，并强调了ID选择器的唯一性、类选择器的可重复性以及优先级顺序：ID选择器优先于类选择器，类选择器优于标签选择器。同时，提及了ID和类属性在HTML元素中的应用。

摘要由CSDN通过智能技术生成

选择器常用三种类型：

1.标签选择器

语法：

标签名{

属性1:属性值1;

属性2:属性值2;

}

2.class选择器

语法：

.class名{

属性1:属性值1;

属性2:属性值2;

}

3.id选择器

语法：

#id名{

属性1:属性值1;

属性2:属性值2;

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			div{
				height: 100px;
				width: 200px;		/*这里代表着当前页面所有div标签默认为这个样式*/
				background: red;
			}
			p{
				height: 100px;
				width: 200px;		/*这里代表着当前页面所有p标签默认为这个样式*/
				background: blue;
			}
			.div2{
				height: 100px;
				width: 200px;		/*当一个标签内class的值为 div2 时该标签使用这样式(如下面例子div2标签)*/
				background: gold;
			}
			#div3{
				height: 100px;
				width: 200px;		/*当一个标签内id的值为 div3 时该标签使用这样式(如下面例子div3标签)*/
				background: greenyellow;
			}
		</style>
	</head>
	<body>
	<div>我是div标签</div>
	红色区域代码：<xmp><div>我是div标签</div></xmp>
	<p>我是p标签</p>
	蓝色区域代码:<xmp><p>我是p标签</p></xmp>
	<div class="div2">我是div2标签</div>
	黄色区域代码:<xmp><div class="div2">我是div2标签</div></xmp>
	<div id="div3">我是div3标签</div>
	绿色区域代码:<xmp><div id="div3">我是div3标签</div></xmp>
	</body>
</html>

大致效果如下图也可自己把代码复制到一个html文件里测试