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

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/92656.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Cookie for Mac:隐私保护工具保护您的在线隐私

随着互联网的发展&#xff0c;我们每天都会浏览各种网站&#xff0c;享受在线购物、社交娱乐和学习资料等各种便利。然而&#xff0c;您是否曾经遇到过需要频繁输入用户名和密码的情况&#xff1f;或者不方便访问您常用的网站&#xff1f;如果是这样&#xff0c;那么Cookie for…

【手写promise——基本功能、链式调用、promise.all、promise.race】

文章目录 前言一、前置知识二、实现基本功能二、实现链式调用三、实现Promise.all四、实现Promise.race总结 前言 关于动机&#xff0c;无论是在工作还是面试中&#xff0c;都会遇到Promise的相关使用和原理&#xff0c;手写Promise也有助于学习设计模式以及代码设计。 本文主…

【五】sql 语言 -- 概览

SQL 语言概述SQL 语言提出和发展SQL 语言的功能概述利用 SQL 语言建立数据库学生选课数据库 SCT1. 定义数据库和表 SQL-DDL创建数据库的语句—Create Database创建关系/表的语句—Create Table 2. 向表中追加元组 SQL-DML 利用 SQL 语言进行简单查询单表查询 - SELECT-FROM-WHE…

MySQL安装记录

背景 Windows系统重装了, 想恢复一下之前的MySQL环境, 而且本地数据库也是比较常用的, 刚好本次也在安装, 做一个简单的记录. 也算是自己的学习记录输出. 遇到的问题当然也可以同时记录在这里, 方便后 续回顾. 资料包 百度网盘 // TODO 估计放了也会被CSDN屏蔽, 这里就不放…

Redis 的混合持久化

RDB 相比于 AOF&#xff0c;数据恢复的速度更快&#xff0c;因为是二进制数据&#xff0c;直接加载进内存即可&#xff0c;但是 RDB 的频率不好把握。 如果频率太低&#xff0c;在两次快照期间服务器发生宕机&#xff0c;可能会丢失较多的数据如果频率太高&#xff0c;频繁写入…

软件工程(十三) 设计模式之结构型设计模式(一)

前面我们记录了创建型设计模式,知道了通过各种模式去创建和管理我们的对象。但是除了对象的创建,我们还有一些结构型的模式。 1、适配器模式(Adapter) 简要说明 将一个类的接口转换为用户希望得到的另一个接口。它使原本不相同的接口得以协同工作。 速记关键字 转换接…

伦敦金短线好还是长线好

在伦敦金投之中&#xff0c;长期有一个争论很久的问题&#xff0c;那就是伦敦金投资究竟是长线好还是短线好&#xff1f;不同的投资者对这个问题有不同的看法&#xff0c;一般认为&#xff0c;伦敦金投资比较适合短线交易。笔者也将讨论这个问题&#xff0c;看看伦敦金投资是不…

Ubuntu Touch OTA-2 推出,支持 Fairphone 3 和 F(x)tec Pro1 X

导读UBports 基金会近日宣布为基于 Ubuntu 20.04 LTS (Focal Fossa) 的 Ubuntu Touch 移动操作系统发布并全面提供 OTA-2 软件更新。 Ubuntu Touch OTA-2 在首次 OTA 更新整整四个月后发布&#xff0c;支持新设备&#xff0c;包括 Fairphone 3、F(x)tec Pro1 X 和 Vollaphone X…

YOLO目标检测——肺炎分类数据集下载分享

肺炎分类数据集总共21000图片&#xff0c;可应用于&#xff1a;肺炎检测、疾病诊断、疾病预测和预警等等。 数据集点击下载&#xff1a;YOLO肺炎分类数据集21000图片.rar

基于openstack helm在kubernetes中部署单节点openstack

helm部署单节点openstack OpenStack-Helm 的目标是提供一系列 Helm charts&#xff0c;以便在 Kubernetes 上简单、弹性、灵活地部署 OpenStack 及相关服务。 OpenStack 可以在独立的 Kubernetes 集群之上运行&#xff0c;而不是在现有基础设施之上运行。在此设置中&#xff…

【小沐学Unity3d】3ds Max 骨骼动画制作(Physique 修改器)

文章目录 1、简介2、Physique 工作流程3、Physique 对象类型4、Physique 增加骨骼5、Physique 应用和初始化6、Physique 顶点子对象7、Physique 封套子对象8、设置关键点和自动关键点模式的区别8.1 自动关键点8.2 设置关键点 结语 1、简介 官方网址&#xff1a; https://help.…

计算机毕设 基于机器学习与大数据的糖尿病预测

文章目录 1 课题背景2 数据导入处理3 数据可视化分析4 特征选择4.1 通过相关性进行筛选4.2 多重共线性4.3 RFE&#xff08;递归特征消除法&#xff09;4.4 正则化 5 机器学习模型建立与评价5.1 评价方式的选择5.2 模型的建立与评价5.3 模型参数调优5.4 将调参过后的模型重新进行…

<C++>泛型编程-模板

1.泛型编程 如何实现一个通用的交换函数呢&#xff1f;可以使用函数重载 void Swap(int &left, int &right) {int temp left;left right;right temp; }void Swap(double &left, double &right) {double temp left;left right;right temp; }void Swap(c…

Sentinel流量控制与熔断降级

&#x1f4dd; 学技术、更要掌握学习的方法&#xff0c;一起学习&#xff0c;让进步发生 &#x1f469;&#x1f3fb; 作者&#xff1a;一只IT攻城狮 &#xff0c;关注我&#xff0c;不迷路 。 &#x1f490;学习建议&#xff1a;1、养成习惯&#xff0c;学习java的任何一个技术…

[MyBatis系列③]动态SQL

目录 1、简介 2、if标签 3、foreach标签 4、SQL抽取 ⭐MyBatis系列①&#xff1a;增删改查 ⭐MyBatis系列②&#xff1a;两种Dao开发方式 1、简介 开发中在MyBatis映射文件配置SQL语句&#xff0c;但是前面配置的都是比较简单的&#xff0c;不涉及稍复杂的业务场景。想要应…

函数式编程-Stream流学习第二节-中间操作

1 Stream流概述 java8使用的是函数式编程模式,如同它的名字一样&#xff0c;它可以用来对集合或者数组进行链状流式操作&#xff0c;让我们更方便的对集合或者数组进行操作。 2 案例准备工作 我们首先创建2个类一个作家类&#xff0c;一个图书类 package com.stream.model;…

【BUG】解决安装oracle11g或12C中无法访问临时位置的问题

项目场景&#xff1a; 安装oracle时&#xff0c;到第二步出现oracle11g或12C中无法访问临时位置的问题。 解决方案&#xff1a; 针对客户端安装&#xff0c;在cmd中执行命令&#xff1a;前面加实际路径setup.exe -ignorePrereq -J"-Doracle.install.client.validate.cli…

RHCE——八、DNS域名解析服务器

RHCE 一、概述1、产生原因2、作用3、连接方式4、因特网的域名结构4.1 拓扑4.2 分类4.3 域名服务器类型划分 二、DNS域名解析过程1、分类2、解析图&#xff1a;2.1 图&#xff1a;2.2 过程分析 三、搭建DNS域名解析服务器1、概述2、安装软件3、/bind服务中三个关键文件4、配置文…

原生微信小程序 动态(横向,纵向)公告(广告)栏

先看一下动态效果 Y轴滚动公告的原理是swiper组件在页面中的Y轴滚动&#xff0c;属性vertical&#xff0c;其余属性也设置一下autoplay circular interval"3000" X轴滚动的原理是&#xff0c;利用动画效果&#xff0c;将内容从右往左过渡过去 wxml&#xff1a; &l…

DBi Tech Studio Controls for .NET Crack

DBi Tech Studio Controls for .NET Crack Studio Controls for.NET为企业开发人员提供了一套全面的Windows布局和信息表示软件元素&#xff0c;面向搜索业务分析商业调度和UI表示控制器的程序员。Studio Controls for.NET包含17个免版税的.NET Windows窗体控件&#xff0c;用于…