【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; 效果 , 其权重无穷大 ;

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端