HTML学习日记1

最新推荐文章于 2024-09-10 14:15:01 发布

十月十号

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量76

点赞数

分类专栏： html 文章标签： html css class

本文链接：https://blog.csdn.net/weixin_45575689/article/details/117825762

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS样式的优先级规则，包括标签内style、内部引用style和外部引用style的层级关系。内容中展示了实例，说明了id选择器和类选择器的优先级，并解释了当一个元素拥有多个类时如何决定样式应用。此外，还讨论了类选择器在同一层级下如何覆盖彼此。

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

标签内style，id，Class，多个class优先级

1.标签内的style>内部引用的style>外部引用的style：代码如下：

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
			}
			#a{
				background-color: red;
			}
			.b{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="a" class="b" style="background-color: blue;"></div>
	</body>

div的背景为blue，因此标签内使用style的级别是最高的。当我们将标签内的style删除后，div将在内部引用的style里寻找，因为id比class的优先级别高，所以#a{ background-color: red; }将被引用，该div变为红色。如果标签内没有style和#a都没有则最后才使用.b{ background-color: green; }

2.当一个div有多个class属性的时候，该运用哪一个呢？下面来看段代码：

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
			}
			.b{
				background-color: green;
			}
			.c{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="b c"></div>
	</body>