css引入方式及权重

最新推荐文章于 2024-03-02 20:19:18 发布

亦是木子也是雨

最新推荐文章于 2024-03-02 20:19:18 发布

阅读量845

点赞数 1

分类专栏： CSS 文章标签： css css权重 css引入方式

本文链接：https://blog.csdn.net/qq_44162474/article/details/85341086

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css的引入

行间样式

在 style 属性里面直接书写

<h3 style="font-size: 18px; color: #cccccc;">一朵菊花，一个小鬼</h3>

内部样式表

写在 head 标签内面，并用 style 标签定义

<style>
    h3 {
      font-size: 16px;
      color: #666666;
    }
  </style>

外部样式表

head 标签里面进行书写

<link rel="stylesheet" href="./css/global.css">

css权重

css权重主要是由数值决定的，具体对应数值如下：

选择器	权重
！important	Infinity
行间样式	1000
id	100
class、属性、伪类	10
标签、伪元素	1
通配符、继承的样式	0

权重会叠加

div ul li ： 3
.nav ul li ： 12
a:hover ： 11
.nav a ：11

<!DOCTYPE html>
<html>
<head>
	<title>css权重</title>
	<meta charset="utf-8">
</head>
<body>
	<div>
		<p>css权重</p>这个权重值为：1+1=2 <!-- 这个权重值为：1+1=2 -->
	</div>
	<div>
		<p id="lei">css权重</p>		<!-- 这个权重值为：1+100=101 -->
	</div>
</body>
</html>

再举个例子：

<!DOCTYPE html>
<html>
<head>
	<title>css权重</title>
	<meta charset="utf-8">
	<style type="text/css">
		p{
			font-size: 20px;
			color: red;
		}
		div p{
			font-size: 15px;
			color: green;
		}
		#lei{
			font-size: 25px;
			color: yellow;
		}
	</style>
</head>
<body>
	<div>
		<p id="lei">css权重</p>
	</div>
</body>
</html>

上面的例子是：三条样式修饰同一元素p,那么最终的样式如何呢？很显然，最后的样式是第三个样式也就是字体大小为25px,颜色为yellow。
另外补充一条：各个选择器之间的进制为256

亦是木子也是雨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css引入方式及权重

上一篇写了css选择器，那么当许多样式修饰同一元素时，浏览器会作何选择呢？这就涉及到了css选择器的权重问题，具体如下：css权重主要是由数值决定的，具体对应数值如下：选择器类型数值！importantInfinity行间样式1000id100class 伪类10标签伪元素1通配符0那么，如何理解呢？我是这样理解的：元素...
复制链接

扫一扫