CSS选择器及其权重

最新推荐文章于 2023-07-28 15:10:34 发布

Stirve unremitting

最新推荐文章于 2023-07-28 15:10:34 发布

阅读量96

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104848223

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			样式的三种写法:
				1: 内部样式
					<head>
						<style type="text/css">
							选择器{属性:值;}
						</style>						
					</head>
				
				2: 内联样式
					在标签中添加属性
					<div style="属性:值;"></div>
					
				3: 外部样式
					1: 创建页面
					2: 创建外部css文件
					3: 建立关系
						方式一:(推荐使用)
						<link rel="stylesheet" href="css文件地址">
						
						方式二:(作为了解)
						@import url(css文件地址);
			样式权重:
				内联样式 > 内部样式 外部样式 (谁后面写,显示谁)
				就近原则
				
			选择器:
				类型选择器(元素选择器  标签选择器): div span p h1...
				
				类选择器(class选择器):选中指定的标签
					1: 给标签添加属性 class="name"
					2: 选择器为           .name{}
					在一个页面中可以多次出现,提高样式的重用性,通常用来设置样式
					
				id选择器:选中指定的标签
					1: 给标签添加属性 id="name"
					2: 选择器为            #name{}
					在一个页面中相同的id值只允许出现一次,不能多次使用
					哎呀,你掉进井里了 id #
					
				伪类选择器:
					:link{}		未访问的状态
					:visited{}	访问过后的状态
					:hover{}	鼠标移入的状态
					:active{}	鼠标按下的状态
					
				通配符	*{}		匹配页面中所有的元素
				
				群组选择器  选择器1,选择器2,选择器3{} 都被选中
				
				包含选择器(后代选择器)
					选择器1  选择器2  选择器3{}	选中指定这个
					
			选择器权重对比:
				加载顺序由上至下,相同权重值的选择器,加载最后写的
				
				id > class > 类型选择器
				100   10      1
				
				包含选择器权重值为 各个选择器权重值之和
				
				css层叠
					指的是优先加载权重值高的
					除非有添加 !important
	</body>
</html>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器及其权重

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 样式的三种写法: 1: 内部样式 <head> &lt...
复制链接

扫一扫