【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

本文主要是介绍【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、权重叠加计算公式
- 1、后代选择器权重计算
- 2、后代选择器权重计算二
- 3、链接伪类选择器权重计算
二、代码示例
- 1、标签结构
- 2、后代选择器选择案例 1
- 2、后代选择器选择案例 2
- 3、后代选择器选择案例 3

一、权重叠加计算公式

在使用多个类型的基础选择器进行组合时 , 如交集选择器 / 后代选择器等 , 涉及到将多个基础选择器的权重进行叠加 ;

权重叠加计算公式示例 : 根据下面的基础选择器权重表格 , 进行权重叠加计算 ;

CSS 选择器	选择器优先级 - 权重计算
继承父标签的样式 , `*` 通配符选择器	0,0,0,0
标签选择器	0,0,0,1
类选择器，链接伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
标签的行内样式 `style` 属性	1,0,0,0
样式后添加 `!important`	权重无穷大

1、后代选择器权重计算

div p span 选择器权重计算 :

这 3 个选择器是三个基础选择器标签选择器组合而成的后代选择器 ;

该选择器设置的是 div 标签下的 p 标签下的 span 标签样式 ;

标签选择器的权重为 0,0,0,1 ;

3 个标签选择器的权重叠加为 : 0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3 ;

因此最终的 div p span 选择器的权重为 0,0,0,3 ;

2、后代选择器权重计算二

.nav p span 选择器权重计算 :

该选择器是后代选择器 , 由 1 个类选择器 , 2 个标签选择器组合而成的 ;

该选择器是设置 .nav 类标签下的 p 标签下的 span 标签样式 ;

类选择器的权重为 0,0,1,0 ;

标签选择器的权重为 0,0,0,1 ;

1 个类选择器 + 2 个标签选择器组合后的权重为 : 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2 ;

最终的 .nav p span 选择器权重为 0,0,1,2 ;

3、链接伪类选择器权重计算

a:hover 选择器权重计算 :

该选择器是链接伪类选择器 , 由 1 个链接选择器 , 1 个伪类选择器组合而成的 ;

该选择器是设置鼠标经过标签后的样式 ;

伪类选择器的权重为 0,0,1,0 ;

标签选择器的权重为 0,0,0,1 ;

1 个伪类选择器 + 1 个标签选择器组合后的权重为 : 0,0,1,0 + 0,0,0,1 = 0,0,1,1 ;

最终的 a:hover 标签伪类选择器权重为 0,0,1,1 ;

二、代码示例

1、标签结构

给定 HTML 标签结构 :

	<div class="nav"><a href="https://blog.csdn.net/">博客</a><a href="https://download.csdn.net/">下载</a><a href="https://edu.csdn.net/">学习</a><a href="https://bbs.csdn.net/">社区</a></div>

之后为该标签结构设置各种 CSS 样式 , 进行测试 ;

2、后代选择器选择案例 1

将上面的标签设置成红色 , 设置 .nav 类下的 a 标签选择器的样式即可 , 该选择器的权重为 :

类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 ;

	<style>/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */.nav a {color: red;}</style>

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器权重计算</title><style>/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */.nav a {color: red;}</style>
</head>
<body><div class="nav"><a href="https://blog.csdn.net/">博客</a><a href="https://download.csdn.net/">下载</a><a href="https://edu.csdn.net/">学习</a><a href="https://bbs.csdn.net/">社区</a></div>
</body>
</html>

展示效果 :
在这里插入图片描述

2、后代选择器选择案例 2

如果要将博客的文本颜色变为蓝色 , 尝试为博客标签添加一个类 blog

<a href="https://blog.csdn.net/" class="blog">博客</a>

然后为该类设置样式 , 发现设置无效 ;

		/* 类选择器 0,0,1,0 小于上面的 0,0,1,1 该设置不生效 */.blog {color: blue;}

这是因为上面的类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 权重

高于

类选择器 0,0,1,0 权重 ,

因此 , 后者设置的样式被忽略了 ;

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器权重计算</title><style>/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */.nav a {color: red;}/* 类选择器 0,0,1,0 小于上面的 0,0,1,1 该设置不生效 */.blog {color: blue;}</style>
</head>
<body><div class="nav"><a href="https://blog.csdn.net/" class="blog">博客</a><a href="https://download.csdn.net/">下载</a><a href="https://edu.csdn.net/">学习</a><a href="https://bbs.csdn.net/">社区</a></div>
</body>
</html>

展示效果 :
在这里插入图片描述

3、后代选择器选择案例 3

如果要将博客的文本颜色变为蓝色 , 尝试为博客标签添加一个类 blog

<a href="https://blog.csdn.net/" class="blog">博客</a>

然后为 .nav 类下的 .blog 类元素设置样式 ,

		/* 类选择器 0,0,1,0 + 类选择器 0,0,1,0 = 0,0,2,0 */.nav .blog {color: blue;}

这是因为该选择器的类选择器 0,0,1,0 + 类选择器 0,0,1,0 = 0,0,2,0 权重

高于

开始的类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1

因此 , 后者设置的样式可以覆盖前者的样式 ;

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器权重计算</title><style>/* 类选择器 0,0,1,0 + 标签选择器 0,0,0,1 = 0,0,1,1 */.nav a {color: red;}/* 类选择器 0,0,1,0 小于上面的 0,0,1,1 该设置不生效 */.blog {color: blue;}/* 类选择器 0,0,1,0 + 类选择器 0,0,1,0 = 0,0,2,0 */.nav .blog {color: blue;}</style>
</head>
<body><div class="nav"><a href="https://blog.csdn.net/" class="blog">博客</a><a href="https://download.csdn.net/">下载</a><a href="https://edu.csdn.net/">学习</a><a href="https://bbs.csdn.net/">社区</a></div>
</body>
</html>