CSS选择器的权重问题

最新推荐文章于 2024-08-24 00:02:10 发布

皮卡洛

最新推荐文章于 2024-08-24 00:02:10 发布

阅读量4.3k

点赞数 2

分类专栏：前端学习学习笔记文章标签：前端 css 选择器权重

本文链接：https://blog.csdn.net/zheng_pika/article/details/78863582

版权

前端学习同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

学习笔记

17 篇文章 0 订阅

订阅专栏

CSS是可以用来添加样式的

有内部样式（内部样式就是在html文件中通过<style></style>标签来添加样式）和

外联样式（通过<link>标签将外部的样式css文件引入到html文件中）

还有行间样式，即在元素标签中通过style=" "添加样式；

而在各个不同的样式添加中，优先级就决定了最后真正能呈现在页面的效果；

而添加样式是通过CSS选择器选择指定的标签进行添加的，而选择器也不是唯一的：

1、id选择器（唯一的与标签只能是一对一）

2、class选择器（与标签可以一对多或者多对一）

3、标签选择器（标签名称）

4、通配符选择器（“*”一般用来初始化所有标签）

此时优先级是：行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器

补充：当绝对需要确定一个元素具有特定的属性CSS时，可以在样式后添加------------！important；

例如

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>权重问题</title>
	<style type="text/css">
	.blue{
		color: blue;
	}
	</style>
</head>
<body>
<p style="color: red" class="blue">行间红色，class选择器是蓝色</p>
</body>
</html>

因为行间样式的优先级更高，所以字应该是红色