【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

一、CSS 优先级

1、优先级引入

定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 ,

  • 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ;

    	<style>
    		div {
    			color: red;
    			font-size: 30px;
    		}
    
    		div {
    			color: blue;
    		}
    	</style>
    
  • 如果 CSS 选择器 不同 , 则需要考虑 CSS 优先级 问题 , 需要计算对应的 选择器 权重 ;

2、选择器基本权重

  • 继承父类样式 选择器 , 权重 0,0,0,0 ;

    		/* 0. 继承父类样式 权重 0,0,0,0 */
    		body {
    			color: red;
    		}
    
  • 通配符选择器 * , 权重 0,0,0,0 ;

    		/* 0. 通配符选择器 权重 0,0,0,0 */
    		* {
    			color: red;
    		}
    
  • 标签选择器 , 权重 0,0,0,1 ;

    		/* 1. 标签选择器 权重 0,0,0,1 */
    		div {
    			color: pink
    		}
    
  • 类选择器 , 权重 0,0,1,0 ;

    		/* 2. 类选择器 权重 0,0,1,0 */
    		.one {
    			color: blue;
    		}
    
  • ID 选择器 , 权重 0,1,0,0 ;

    		/* 3. ID 选择器 权重 0,1,0,0 */
    		#two {
    			color: green;
    		}
    
  • 行内样式表 , 权重 1,0,0,0 ;

    	/* 4. 行内样式表 权重 1,0,0,0 */
    	<div class="one" id="two" style="color: purple;"> 选择器权重 </div>
    
  • 任何选择器中 样式后 添加 !important 权重会被提升为无穷大 , 即使在最低级的 标签选择器样式后添加 !important , 其样式的权重也会被强行提高到最高级 , 权重无穷大 ;

    		/* 5. 任何选择器中 样式后 添加 !important 权重最高 */
    		div {
    			color: pink!important;
    		}
    

    3、完整代码示例

    完整代码示例 :

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/* 0. 继承父类样式 权重 0,0,0,0 */
    		body {
    			color: red;
    		}
    		/* 0. 通配符选择器 权重 0,0,0,0 */
    		* {
    			color: red;
    		}
    	
    		/* 1. 标签选择器 权重 0,0,0,1 */
    		div {
    			color: pink
    		}
    		
    		/* 2. 类选择器 权重 0,0,1,0 */
    		.one {
    			color: blue;
    		}
    		
    		/* 3. ID 选择器 权重 0,1,0,0 */
    		#two {
    			color: green;
    		}
    		
    		/* 4. 行内样式表 权重 1,0,0,0 */
    		
    		/* 5. 任何选择器中 样式后 添加 !important 权重最高 */
    		div {
    			color: pink!important;
    		}
    	</style>
    </head>
    <body>
    	/* 4. 行内样式表 权重 1,0,0,0 */
    	<div class="one" id="two" style="color: purple;"> 选择器权重 </div>
    </body>
    </html>
    

    展示效果 : 最终展示的效果是 color: pink!important; 效果 , 其权重无穷大 ;

相关推荐
熊的猫33 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书